DOM操作创建表格
为了方便构建表格，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>元素。
- deleteRows(pos):删除指定位置的行。
- insertRows(pos):向rows集合中的指定位置插入一行。
为<tbody>元素添加的属性和方法如下。
- rows:保存着<tbody>元素中行的HTMLCollection。
- deleteRows(pos):删除指定位置的行。
- insertRows(pos):向rows集合中的指定位置插入一行，返回对新插入的引用。
为<tr>元素添加的属性和方法如下。
- cells:保存着<tr>元素中单元格的HTMLCollection。
- deleteCell(pos):删除指定位置的单元格。
- insertCell(pos):向cells集合中的指定位置插入一个单元格，返回对新插入单元格的引用。
使用这些属性和方法，可以极大地减少创建表格所需的代码数量。例如：
1 //创建table 2 var table = document.createElement("table"); 3 table.border = 1; 4 table.width = "100%"; 5 6 //创建tbody 7 var tbody = document.createElement("tbody"); 8 table.appendChild(tbody); 9 10 //创建第一行 11 tbody.insertRow(0); 12 tbody.rows[0].insertCell(0); 13 tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1")); 14 tbody.rows[0].insertCell(1); 15 tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1")); 16 17 //创建第二行 18 tbody.insertRow(1); 19 tbody.rows[1].insertCell(0); 20 tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2")); 21 tbody.rows[1].insertCell(1); 22 tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2")); 23 24 //将表格添加到文档主体中 25 document.body.appendChild(table);
