JavaScript DHTML/Table/Table Head
Содержание
Create Table Head
<html>
<body>
<script language="JavaScript">
function function1() {
var m = document.all.myT.createTFoot();
m.bgColor = "red";
}
function function2() {
var n = document.all.myT.createTHead();
n.bgColor = "yellow";
}
</script>
<table id="myT">
<thead id="th">
<tr>
<th>Cell 1</th>
<th>Cell 2</th>
</tr>
<tfoot id="tf">
<tr><td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
<input type="button" value="Create tfoot" onclick="function1();">
<input type="button" value="Create thead" onclick="function2();">
</body>
</html>
Delete Table Head Example
<html>
<body>
<script language="JavaScript">
function function1() {
document.all.myTable.deleteTFoot();
}
</script>
<table id="myTable" width="25%" border="1">
<tr>
<td>Row 1</td>
<td>Cell 1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Row 3</td>
<td>Cell 3</td>
</tr>
<tfoot>
<tr>
<td>TFOOT</td>
<td>Cell 4</td>
</tr>
</tfoot>
</table>
<input type="button" value="Remove TFOOT" onclick="function1();">
</body>
</html>
Header scope
<html>
<body>
<table id="myTable">
<tr>
<th id="myTableHeader">Row 1</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td id="td1">Cell info 1</td>
<td>Cell</td>
</tr>
</table>
<script language="JavaScript">
document.all.myTableHeader.scope = "colgroup";
</script>
<button onclick="alert("This cell provides header information for its col.");">
Cell info 1
</button>
</body>
</html>
"headers" Example
<html>
<body>
<script>
function function1() {
document.getElementById("td1").headers = "hdr1";
document.getElementById("td2").headers = "hdr2";
document.getElementById("td3").headers = "hdr3";
}
</script>
<table width="450" border="3" cellspacing="5" cellpadding="10" bordercolor="#FF0000">
<tr>
<th id="hdr1">Item Number</th>
<th id="hdr2">Item Name</th>
<th id="hdr3">Item Description</th>
</tr>
<tr>
<td id="td1">28030</td>
<td id="td2">CD-ROM</td>
<td id="td3">Tutorial</td>
</tr>
</table>
<input type="Button" id="b1" value="Turn Headers "on"" onClick="function1();">
</body>
</html>
"tHead" Example
<html>
<body>
<script language="JavaScript">
function function1() {
document.all.myTable.tHead.style.backgroundColor = "blue";
}
function function2() {
document.all.myTable.tFoot.style.backgroundColor = "red";
}
</script>
<table id="myTable" border="1" width="500">
<thead>
<tr>
<td>tHead, Cell 1</td>
</tr>
</thead>
<tbody>
<tr>
<td>tBody, Cell 2</td>
</tr>
<tr>
<td>tBody, Cell 3</td>
</tr>
<tr>
<td>tBody, Cell 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>tFoot, Cell 5</td>
</tr>
</tfoot>
</table>
<button onclick="function1();">Turn Head Blue</button>
<button onclick="function2();">Turn Foot Red</button>
</body>
</html>