HTML DOM Table 对象
Table 对象
Table 对象代表一个 HTML 表格。
在 HTML 文档中 <table> 标签每出现一次，一个 Table 对象就会被创建。
Table 对象方法
| 方法 | 描述 |
|---|---|
| createCaption() | 为表格创建一个 caption 元素。 |
| createTFoot() | 在表格中创建一个空的 tFoot 元素。 |
| createTHead() | 在表格中创建一个空的 tHead 元素。 |
| deleteCaption() | 从表格删除 caption 元素以及其内容。 |
| deleteRow() | 从表格删除一行。 |
| deleteTFoot() | 从表格删除 tFoot 元素及其内容。 |
| deleteTHead() | 从表格删除 tHead 元素及其内容。 |
| insertRow() | 在表格中插入一个新行 |
- insertRow() 方法用于在表格中的指定位置插入一个新行。
-
语法
- tableObject.insertRow(index)
-
返回值
- 返回一个 TableRow，表示新插入的行。
-
说明
- 该方法创建一个新的 TableRow 对象，表示一个新的 <tr> 标记，并把它插入表中的指定位置。
- 新行将被插入 index 所在行之前。若 index 等于表中的行数，则新行将被附加到表的末尾。
- 如果表是空的，则新行将被插入到一个新的 <tbody> 段，该段自身会被插入表中。
-
抛出
- 若参数 index 小于 0 或大于等于表中的行数，该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。
例：在表格的第0行后插入新行
<html>
<head>
<script type="text/javascript">
function insRow()
{
document.getElementById('myTable').insertRow(0); //在表格的第0行后插入新行
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="insRow()"
value="Insert new row">
</body>
</html>
可以用 TableRow.insertCell() 方法给新创建的行添加内容！
cells保存着<tr>元素中单元格的 HTMLCollectionin集合；
insertCell(pos) 方法 向集合的指定位置插入一个单元格，并返回它的引用(地址),参数为空默认添加到插入最后一行。
例：
function insRow() { document.getElementById('myTable').insertRow(0); //在表格的第0行后插入新行 var x = document.getElementById("myTable").insertRow(0); //cells保存着<tr>元素中单元格的 HTMLCollectionin集合； //insertCell(pos) 方法 向集合的指定位置插入一个单元格，并返回它的引用(地址),参数为空默认添加到插入最后一行。(下标（pos）是 0 开始的) var y = x.insertCell(0); //y是第1单元格的引用 var z = x.insertCell(1); //z是第2单元格的引用 var a = x.insertCell(2); //a是第3单元格的引用 y.innerHTML = '我是第一个单元格 y引用的新增加的内容' z.innerHTML = '我是第二个单元格 z引用的新增加的内容'; a.innerHTML = '我是第三个单元格 a引用的新增加的内容'; }
你可以用个搞个表格 然后按钮onclck即可.
Table 对象集合
| 集合 | 描述 |
|---|---|
| cells[] | 返回包含表格中所有单元格的一个数组。 |
| rows[] | 返回包含表格中所有行的一个数组。 |
| tBodies[] | 返回包含表格中所有 tbody 的一个数组。 |
cells 和 rows 用的比较多
cells 是 行的单元格集合
rows 是 表格行的集合
自己去用啊
标准属性
| 属性 | 描述 |
|---|---|
| className | 设置或返回元素的 class 属性。 |
| dir | 设置或返回文本的方向。 |
| lang | 设置或返回元素的语言代码。 |
| title | 设置或返回元素的 title 属性。 |
Table 对象属性
| 属性 | 描述 |
|---|---|
| align | 表在文档中的水平对齐方式。（已废弃） |
| bgColor | 表的背景颜色。（已废弃） |
| border | 设置或返回表格边框的宽度。 |
| caption | 对表格的 <caption> 元素的引用。 |
| cellPadding | 设置或返回单元格内容和单元格边框之间的空白量。 |
| cellSpacing | 设置或返回在表格中的单元格之间的空白量。 |
| frame | 设置或返回表格的外部边框。 |
| id | 设置或返回表格的 id。 |
| rules | 设置或返回表格的内部边框（行线）。 |
| summary | 设置或返回对表格的描述（概述）。 |
| tFoot | 返回表格的 TFoot 对象。如果不存在该元素，则为 null。 |
| tHead | 返回表格的 THead 对象。如果不存在该元素，则为 null。 |
| width | 设置或返回表格的宽度。 |
主要还得掌握 插 删 加内容 改内容.
下面对cells另一种解释：
Table cells 集合
定义和用法
cells 集合返回表格中指定行的所有 <td> 或 <th> 元素。（集合中全包括 但要先获取指定行）
来个代码：
<script type="text/javascript">
var tables = document.getElementsByTagName("table")[0]; //先得获取道行 才能进行cells的操作！
var cells = tables.rows[0].cells;
console.log(cells);
var cells = tables.rows[1].cells;
console.log(cells);
</script>
</table>