HTML DOM Table 对象
HTML DOM Table对象是HTML文档中的一个对象,它代表了HTML表格,也是网页中常用的数据展示方式之一。在使用HTML DOM Table 对象时,我们可以通过JavaScript来获取、修改、添加、删除表格中的内容和属性。
Table对象方法
Table对象具有很多方法,这里列举常用的几个方法:
-
createTHead():创建表格的头部
-
createTFoot():创建表格的底部
-
createCaption():创建表格的标题
-
insertRow():在表格中插入一行
-
deleteRow():在表格中删除一行
-
deleteCaption():删除表格的标题
Table对象属性
Table对象同样拥有许多属性,这里同样列出几个常用的属性:
-
rows:表格中的所有行
-
tHead:表格中的头部
-
tFoot:表格中的底部
-
caption:表格中的标题
-
border:表格的边框大小
Table对象示例代码
下面是一个Table对象的示例代码:
<!DOCTYPE html>
<html>
<head>
<title>Table实例</title>
<meta charset="utf-8">
</head>
<body>
<table id="myTable" border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>出生日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
<td>2000-01-01</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>女</td>
<td>1998-01-01</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var myTable = document.getElementById("myTable");
var rows = myTable.rows;
//获取表格的每一行的第一列
for(var i = 0; i < rows.length; i++) {
var row = rows[i];
var first = row.cells[0];
console.log(first.innerHTML);
}
//在表格尾部添加一行
var footer = myTable.createTFoot();
var newRow = footer.insertRow(-1);
newRow.insertCell(0).innerHTML = "王五";
newRow.insertCell(1).innerHTML = "22";
newRow.insertCell(2).innerHTML = "男";
newRow.insertCell(3).innerHTML = "1996-01-01";
</script>
</body>
</html>
在这个示例代码中,我们可以通过getElementById获取到了id为"myTable"的table元素,进而获取到了table中所有的行,以及具体的一列数据。我们还可以使用createTFoot方法在表格的尾部添加一行数据。
总结
HTML DOM Table对象是HTML文档中一个非常有用的对象。它可以充分发挥HTML表格的展示功能,在数据的展示方面具有不可替代的作用。我们可以通过Table对象的方法和属性来操作表格中的内容和属性,同时也可以通过Table对象添加、删除表格中的元素。希望本文对你有所帮助。