JavaScript DHTML/Table/Cell
Содержание
Delete a Cell
<source lang="html4strict">
<html> <body> <script language="JavaScript">
function function1() {
document.all.myTr.deleteCell(2);
}
</script>
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
<input type="button" value="Remove Cell 3" onclick="function1();"> </body> </html>
</source>
Inserrt a table cell
<source lang="html4strict">
<html> <head> <title>Build-o-Table</title> <script type="text/javascript"> function procImage() {
var tbl = document.getElementById("table1");
tbl.border="5px";
tbl.cellPadding="5px";
var row1 = tbl.insertRow(-1);
var cell1 = row1.insertCell(0);
var cell2 = row1.insertCell(1);
var txtAttr1 = document.createTextNode("src");
cell1.appendChild(txtAttr1);
} </script> <body onload="procImage();">
| adsf |
</body> </html>
</source>
Insert Cell Example
<source lang="html4strict">
<html> <body> <script language="JavaScript"> function function1() {
var myRow = document.all.myTable.insertRow(); var myCell = myRow.insertCell(); myCell.innerText = "The added cell";
} </script>
| 1 | 2 |
| 3 | 4 |
<button onclick="function1();">Add a cell</button> </body> </html>
</source>
Table Cell background Color Example
<source lang="html4strict">
<html> <head> <script>
function function1() {
document.all.myTD.bgColor = "red";
}
function function2() {
document.all.myTD.bgColor = "";
}
</script> </head> <body bgcolor="#ccffcc" text="#000000">
| Cell 1 content | Cell 2 content |
<input type="button" value="Add background color to Cell 1" onClick="function1();"> <input type="button" value="Remove background colors" onClick="function2();"> </body> </html>
</source>
Table Cell "background" Example
<source lang="html4strict">
<html> <head> <script>
function function1() {
document.all.myTD.background = "http://www.wbex.ru/style/logo.png";
}
function function2() {
document.all.myTD.background = "";
}
</script> </head> <body bgcolor="white" text="white">
| Cell 1 content | Cell 2 content | Cell 3 content |
<input type="button" name="button2" value="Add background image to Cell 1" onClick="function1();"> <input type="button" name="button3" value="Remove background image" onClick="function2();"> </body> </html>
</source>
Table cell Index Example
<source lang="html4strict">
<html> <body> Click in any cell to view the cellIndex value.
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |
<button onclick="alert(myTable.cellPadding);">Cell Padding</button>
<button onclick="alert(myTable.cellSpacing);">Cell Spacing</button>
<button onclick="alert(myTable.cols);">cols</button>
<script language="JavaScript">
function function1(elem) {
alert("Cell Index :"+ elem.cellIndex);
}
</script> </body> </html>
</source>
Table "cellPadding" Example
<source lang="html4strict">
<html> <body> Click in any cell to view the cellIndex value.
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |
<button onclick="alert(myTable.cellPadding);">Cell Padding</button>
<button onclick="alert(myTable.cellSpacing);">Cell Spacing</button>
<button onclick="alert(myTable.cols);">cols</button>
<script language="JavaScript">
function function1(elem) {
alert("Cell Index :"+ elem.cellIndex);
}
</script> </body> </html>
</source>
Table cell Spacing Example
<source lang="html4strict">
<html> <body> Click in any cell to view the cellIndex value.
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |
<button onclick="alert(myTable.cellPadding);">Cell Padding</button>
<button onclick="alert(myTable.cellSpacing);">Cell Spacing</button>
<button onclick="alert(myTable.cols);">cols</button>
<script language="JavaScript">
function function1(elem) {
alert("Cell Index :"+ elem.cellIndex);
}
</script> </body> </html>
</source>
