📄 16.17.htm
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>读取表格属性</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<center><h1>读取表格属性</h1></center><p>
<!--表格开始-->
<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>
<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>
<script type="text/javascript">
<!--
//通过id获取表格属性
var theTable = document.getElementById('testTable');
document.writeln("<pre>");
//输出表的总行数
document.writeln("Overall table rows="+theTable.rows.length);
//输出表格中tbody的数量
document.writeln("Number of tbody tags="+theTable.tBodies.length);
//输出每个tbody中的行数
for (i = 0; i < theTable.tBodies.length; i++)
document.writeln("\t tbody["+i+"] number of rows = "
+theTable.tBodies[i].rows.length);
//输出tfoot中的行数
document.writeln("Rows in tfoot tag="+theTable.tFoot.rows.length);
//输出tbody中的行数
document.writeln("Rows in thead tag="+theTable.tHead.rows.length);
document.writeln("</pre>");
//-->
</script>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -