JavaScript DHTML/Table/Row
Содержание
Delete Row
<html>
<body>
<script language="JavaScript">
function function1() {
document.all.myT.deleteRow(2);
}
</script>
<table id="myT" 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>
<tr>
<td>Row 4</td>
<td>Cell 4</td>
</tr>
</table>
<input type="button" value="Remove Row 3" onclick="function1();">
</body>
</html>
Insert a Row Example
<html>
<body>
<script language="JavaScript">
function function1() {
var myRow = document.all.myTable.insertRow();
var myCell = myRow.insertCell();
myCell.innerText = "The added cell";
}
</script>
<table id="myTable" border="1" cellspacing="5" cellpadding="5">
<tr>
<td width="100">1 </td>
<td width="100">2 </td>
</tr>
<tr>
<td>3 </td>
<td>4 </td>
</tr>
</table>
<button onclick="function1();">Add a cell</button>
</body>
</html>
Move a Row Example
<html>
<body>
<script language="JavaScript">
function function1() {
document.all.myTable.moveRow(-1, 2);
}
</script>
<table id="myTable" border="1" cellspacing="5" cellpadding="5">
<tr>
<td>First Row</td>
<td> </td>
</tr>
<tr>
<td>Second Row</td>
<td> </td>
</tr>
<tr>
<td style="background-color:blue">Third Row</td>
<td> </td>
</tr>
<tr>
<td style="background-color:red">Fourth Row</td>
<td> </td>
</tr>
</table>
<button onclick="function1();">Move Row</button>
</body>
</html>
"rowSpan" Example
<html>
<body>
<script language="JavaScript">
function function1() {
document.getElementById("th1").rowSpan = 2;
}
function function2() {
location.reload();
}
</script>
<table width="542" border="10" bordercolor="red" cellpadding="20">
<tr>
<th id="th1">Cell 1</th>
<th>Cell 2</th>
<th id="th5">Cell 3</th>
</tr>
<tr>
<th>Cell 4</th>
<th id="th2">Cell 5</th>
<th>Cell 6</th>
</tr>
<tr>
<th>Cell 7</th>
<th>Cell 8</th>
<th>Cell 9</th>
</tr>
<tr>
<th >Cell 10</th>
<th >Cell 11</th>
<th >Cell 12</th>
</tr>
</table>
<input type="button" value="Span(2) Cell 1" onClick="function1();">
<input type="button" value="Restore" onClick="function2();">
</body>
</html>
Table row Index
<script language="JavaScript">
function function1(elem) {
var m = elem.rowIndex;
alert("Row Index: "+m);
}
</script>
<table width="100" border="3" cellspacing="2" cellpadding="2">
<tr id="tr1" onclick="function1(this);">
<td>Row 1</td>
</tr>
<tr id="tr2" onclick="function1(this);">
<td>Row 2</td>
</tr>
<tr id="tr3" onclick="function1(this);">
<td>Row 3</td>
</tr>
<tr id="tr4" onclick="function1(this);">
<td>Row 4</td>
</tr>
</table>
Table section Row Index
<html>
<body>
<script language="JavaScript">
function function1(elem) {
var m = elem.sectionRowIndex;
alert("The zero-based row index is: "+m);
}
</script>
<table width="100" border="3" cellspacing="2" cellpadding="2">
<tr id="tr1" onclick="function1(this);">
<td>Row 1</td>
</tr>
<tr id="tr2" onclick="function1(this);">
<td>Row 2</td>
</tr>
<tr id="tr3" onclick="function1(this);">
<td>Row 3</td>
</tr>
<tr id="tr4" onclick="function1(this);">
<td>Row 4</td>
</tr>
</table>
</body>
</html>