前面的话
表格表元素是HTML中最复杂的结构之一。要想创建表格,一般都必须涉及表示表格行,单元格,表头等方面的标签。由于涉及的标签多,因而使用核心DOM方法创建和修改表格往往都免不了要编写大量的代码。本文将详细介绍DOM操作表格的属性和方法
,
需求
要通过DOM实现下列格式的表格结构
& lt; table border =,“1”, width =,“100%”的在 ,,,& lt; tbody> ,,,,,,,& lt; tr> ,,,,,,,,,,,& lt; td> Cell 1, 1 & lt;/td> ,,,,,,,,,,,& lt; td> Cell 2, 1 & lt;/td> ,,,,,,,& lt;/tr> ,,,,,,,& lt; tr> ,,,,,,,,,,,& lt; td> Cell 1, 2 & lt;/td> ,,,,,,,,,,,& lt; td> Cell 2, 2 & lt;/td> ,,,,,,,& lt;/tr>,,,,,,,, ,,,& lt;/tbody> & lt;/table>
,
DOMcore
如果通过DOMcore方法,则方法如下
//创建表格var table =, document.createElement(“表”);
时间=table.border “1”;
时间=table.width “100%”;//创建tbodyvar tbody =, document.createElement(“身体”);
table.appendChild(身体);//创建第一行var row1 =, document.createElement (tr);
tbody.appendChild(第一行);var cell1_1 =, document.createElement (“td”);
cell1_1.appendChild (document.createTextNode (Cell 1,1));
row1.appendChild (cell1_1); var cell2_1 =, document.createElement (“td”);
cell2_1.appendChild (document.createTextNode (" Cell 2、1 "));
row1.appendChild (cell2_1);//创建第二行var row2 =, document.createElement (tr);
tbody.appendChild (row2); var cell1_2 =, document.createElement (“td”);
cell1_2.appendChild (document.createTextNode (Cell 1, 2));
row2.appendChild (cell1_2); var cell2_2 =, document.createElement (“td”);
cell2_2.appendChild (document.createTextNode (“Cell 2、2”));
row2.appendChild (cell2_2);//将表格添加到文档主体中document.body.appendChild(表);
,
属性和方法
显然DOM代码很长,为了方便构建表格,HTML DOM为& lt; table> & lt; tbody> & lt; tr>元素添加了属性和方法。
【1】为& lt; table>元素添加的属性和方法
标题:保存着对& lt; caption>元素的指针 身体:是一个& lt; tbody>元素的HTMLCollection tFoot:保存着对& lt; tfoot>元素的指针 tHead:保存着对& lt; thead>元素的指针 createTHead():创建& lt; thead>元素,将其放到表格中,返回引用 createTFoot():创建& lt; tfoot>元素,将其放到表格中,返回引用 createCaption():创建& lt; caption>元素,将其放到表格中,返回引用 deleteTHead():删除& lt; thead>元素 deleteTFoot():删除& lt; tfoot>元素 deleteCaption():删除& lt; caption>元素
,【2】为& lt; tbody>元素添加的属性和方法:
行保存着& lt; tbody>元素中行的HTMLCollection deleteRow (pos):即可删除指定位置的行 insertRow (pos):向行集合中的指定位置插入一行,返回对新插入行的引用
【3】为& lt; tr>元素添加的属性和方法
细胞:保存着& lt; tr>元素中单元格的HTMLCollection deleteCell (pos):删除指定位置的单元格 insertCell (pos):向细胞集合中的指定位置插入一个单元格,返回对新插入单元格的引用
,
代码重写
//创建表格var table =, document.createElement(“表”);
时间=table.border “1”;
时间=table.width “100%”;//创建tbodyvar tbody =, document.createElement(“身体”);
table.appendChild(身体);//创建第一行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(表);
,
效果展示
