HTMLTableElement代表表格,HTMLTableElement对象除了可使用普通HTML元素的各种属性和方法外,还支持如下额外的属性。
- caption:返回该表格的标题对象。可通过修改该属性来改变表格标题。
- HTMLCollection rows: 返回该表格里所有表格行,该属性会返回
<thead……/>
、<tfoot……/>
和<tbody……/>
元素里的所有表格行。只读属性。 - HTMLCollection tBodies:返回该表格里所有
<tbody……/>
元素组成的数组。 - tFoot:返回该表格里的
<tfoot……/>
元素
在获得一个表格之后,完全可以通过上面提供的一系列属性来访问表格“内容”,例如caption属性返回该表格的标题,rows属性返回该表格全部表格行……与前面介绍的完全相似,如果需要访问表格的指定表格行,只需要使用如下格式即可。
- table.rows[index]:返回该表格index+1行的表格行。
HTMLTableRowElement代表表格行,HTMLtableRowElement对象除了可使用普通HTML元素的各种属性和方法外,还支持如下额外的属性。
- cells:返回该表格行内所有单元格组成的数组。只读属性。
- rowIndex:返回该表格行在表格内的索引值。只读属性。
- sectionRowindex:返回该表格行在其所在元素(
<body……/>
、<thead……/>
等元素)的索引值。只读属性。
HTMLTabelCellElement代表单元格,HTMLTableCellElement对象除了可使用普通HTML元素的各种属性和方法外,还支持如下额外的属性。
- cellindex:返回该单元格在该表格行内的索引值。只读属性。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html"/>
<title>访问表格元素</title>
</head>
<body>
<table id="d" border="1" cellspacing="" cellpadding="">
<caption>部门列表</caption>
<tr><th>姓名</th><th>年龄</th><th>职位</th></tr>
<tr><td>张三</td><td>20</td><td>初级程序员</td></tr>
<tr><td>李四</td><td>21</td><td>中级程序员</td></tr>
<tr><td>王五</td><td>23</td><td>高级程序员</td></tr>
</table><br>
<input type="button" name="" id="" value="表格标题" onclick="alert(document.getElementById('d').caption.innerHTML);"/>
<input type="button" name="" id="" value="第一行第一格" onclick="alert(document.getElementById('d').rows[1].cells[0].innerHTML);"/>
<input type="button" name="" id="" value="第二行第二格" onclick="alert(document.getElementById('d').rows[2].cells[1].innerHTML);"/>
<input type="button" name="" id="" value="第三行第三格" onclick="alert(document.getElementById('d').rows[3].cells[2].innerHTML);"/>
</body>
</html>