<html>
<head>
<title>(X)HTML Table Inspector</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<table border="1" frame="box" id="testTable">
<caption>Test Table</caption>
<thead>
<tr>
<th>Product</th>
<th>SKU</th>
<th>Price</th>
</tr>
</thead>
<!-- tfoot does indeed come before tbody -->
<tfoot>
<tr>
<th colspan="3">This has been an HTML 4 table example, thanks for
reading</th>
</tr>
</tfoot>
<tbody>
<tr>
<th colspan="3" align="center">Robots</th>
</tr>
<tr>
<td>Trainer Robot</td>
<td>TR-456</td>
<td>$56,000</td>
</tr>
<tr>
<td>Guard Dog Robot</td>
<td>SEC-559</td>
<td>$5,000</td>
</tr>
<tr>
<td>Friend Robot</td>
<td>AG-343</td>
<td>$124,000</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="3" align="center">Jet Packs</th>
</tr>
<tr>
<td>Economy</td>
<td>JP-3455E6</td>
<td>$6,000</td>
</tr>
<tr>
<td>Deluxe</td>
<td>JP-9999d</td>
<td>$15,000</td>
</tr>
</tbody>
</table>
<br clear="all" /><hr /><br clear="all" />
<script type="text/javascript">
var theTable = document.getElementById('testTable');
</script>
<form action="#" method="get">
<strong>Alignment:</strong>
<select οnchange="theTable.align = this.options[this.selectedIndex].text;">
<option>left</option>
<option>center</option>
<option>right</option>
</select>
<strong>Background Color:</strong>
<select οnchange="theTable.bgColor =
this.options[this.selectedIndex].text;">
<option>white</option>
<option>red</option>
<option>blue</option>
<option>yellow</option>
<option>orange</option>
<option>green</option>
<option>black</option>
</select>
<strong>Frames:</strong>
<select οnchange="theTable.frame = this.options[this.selectedIndex].text;">
<option>above</option>
<option>below</option>
<option>border</option>
<option>box</option>
<option>hsides</option>
<option>vsides</option>
<option>lhs</option>
<option>rhs</option>
<option>void</option>
</select>
<strong>Rules:</strong>
<select οnchange="theTable.rules = this.options[this.selectedIndex].text;">
<option>all</option>
<option>cols</option>
<option>groups</option>
<option>none</option>
<option>rows</option>
</select>
<br /><br />
<strong>Border:</strong>
<input type="text" size="2" maxlength="2" value="1" οnchange="theTable.border =
this.value;" />
<strong>Cell Padding:</strong>
<input type="text" size="2" maxlength="2" value="1" οnchange="theTable.cellPadding
= this.value;" />
<strong>Cell Spacing:</strong>
<input type="text" size="2" maxlength="2" value="1" οnchange="theTable.cellSpacing
= this.value;" />
</form>
</body>
<script type="text/javascript">
<!--
var theTable = document.getElementById('testTable');
document.writeln("<pre>");
document.writeln("Overall table rows="+theTable.rows.length);
document.writeln("Number of tbody tags="+theTable.tBodies.length);
for (i = 0; i < theTable.tBodies.length; i++)
document.writeln("\t tbody["+i+"] number of rows = "+theTable.tBodies[i].rows.length);
document.writeln("Rows in tfoot tag="+theTable.tFoot.rows.length);
document.writeln("Rows in thead tag="+theTable.tHead.rows.length);
document.writeln("</pre>");
//-->
</script>
</html>
dom动态修改表格
最新推荐文章于 2018-11-13 14:11:30 发布