4.5 操作表格

为了方便构建表格，HTML DOM 还为 table 、 tbody和 tr 元素添加了一些属性和方法。
为 table 元素添加的属性和方法如下。

方法描述
caption保存着对 <caption> 元素（如果有）的指针。
tBodies是一个 tbody 元素的 HTMLCollection 。
tFoot保存着对 tfoot 元素（如果有）的指针。
tHead保存着对 thead 元素（如果有）的指针。
rows是一个表格中所有行的 HTMLCollection 。
createTHead()创建 thead 元素，将其放到表格中，返回引用。
createTFoot()创建 tfoot 元素，将其放到表格中，返回引用。
createCaption()创建 caption 元素，将其放到表格中，返回引用。
deleteTHead()删除 thead元素。
deleteTFoot()删除 tfoot 元素。
deleteCaption()删除 caption 元素。
deleteRow(pos)删除指定位置的行。
insertRow(pos)向 rows 集合中的指定位置插入一行。

为 tbody 元素添加的属性和方法如下。

方法描述
rows保存着 tbody 元素中行的 HTMLCollection 。
deleteRow(pos)删除指定位置的行。
insertRow(pos)向 rows 集合中的指定位置插入一行，返回对新插入行的引用。

为 tr元素添加的属性和方法如下。

方法描述
cells保存着 <tr< 元素中单元格的 HTMLCollection 。
deleteCell(pos)删除指定位置的单元格。
insertCell(pos)向 cells 集合中的指定位置插入一个单元格，返回对新插入单元格的引用。使用这些属性和方法，可以极大地减少创建表格所需的代码数量。例如，使用这些属性和方法可以将前面的代码重写如下（加阴影的部分是重写后的代码）。
//创建 table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";
//创建 tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);
// 创建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));
// 创建第二行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));
//将表格添加到文档主体中
document.body.appendChild(table);


评论

共0 条评论
没有更多了..