DOM在操作生成HTML上，还是比较简明的。不过，由于浏览器总是存在兼容和陷阱，导致最终的操作就不是那么简单方便了。本篇章主要了解一下DOM操作表格。
一．操作表格
<table>标签是HTML中结构最为复杂的一个，我们可以通过DOM来创建生成它，或者HTML
DOM来操作它。(PS：HTML
DOM提供了更加方便快捷的方式来操作HTML，有手册)。
html代码部分：
//需要操作的table
1 <table border="1" width="300">
2
3 <caption>人员表</caption>
4
5 <thead>
6
7 <tr>
8
9 <th>姓名</th>
10
11 <th>性别</th>
12
13 <th>年龄</th>
14
15 </tr>
16
17 </thead>
18
19 <tbody>
20
21 <tr>
22
23 <td>张三</td>
24
25 <td>男</td>
26
27 <td>20</td>
28
29 </tr>
30
31 <tr>
32
33 <td>李四</td>
34
35 <td>女</td>
36
37 <td>22</td>
38
39 </tr>
40
41 </tbody>
42
43 <tfoot>
44
45 <tr>
46
47 <td colspan="3">合计：N</td>
48
49 </tr>
50
51 </tfoot>
52
53 </table>
注意：caption标签在一个表格里只有一个
thead标签在一个表格里只能有一个
tfoot标签在一个表格里只能有一个
tbody标签在一个表格里可以有N个
tr，td和th标签在一个表格里可以有N个
JS代码部分：
1 //使用DOM来创建这个表格
2
3 var table = document.createElement(‘table‘);
4
5 table.border = 1;
6
7 table.width = 300;
8
9
10
11 var caption = document.createElement(‘caption‘);
12
13 table.appendChild(caption);
14
15 caption.appendChild(document.createTextNode(‘人员表‘));
16
17
18
19 var thead = document.createElement(‘thead‘);
20
21 table.appendChild(thead);
22
23
24
25 var tr = document.createElement(‘tr‘);
26
27 thead.appendChild(tr);
28
29
30
31 var th1 = document.createElement(‘th‘);
32
33 var th2 = document.createElement(‘th‘);
34
35 var th3 = document.createElement(‘th‘);
36
37
38
39 tr.appendChild(th1);
40
41 th1.appendChild(document.createTextNode(‘姓名‘));
42
43 tr.appendChild(th2);
44
45 th2.appendChild(document.createTextNode(‘性别‘));
46
47 tr.appendChild(th3);
48
49 th3.appendChild(document.createTextNode(‘年龄‘));
50
51
52
53 document.body.appendChild(table);
54
55
PS：使用DOM来创建表格其实已经没有什么难度，就是有点儿麻烦而已。
下面我们再使用HTML DOM来获取和创建这个相同的表格。
HTML
DOM中，给这些元素标签提供了一些属性和方法
|
属性或方法 |
说明 |
|
caption |
保存着<caption>元素的引用 |
|
tBodies |
保存着<tbody>元素的HTMLCollection集合 |
|
tFoot |
保存着对<tfoot>元素的引用 |
|
tHead |
保存着对<thead>元素的引用 |
|
rows |
保存着对<tr>元素的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集合的指定位置插入一个单元格，并返回引用 |
PS：因为表格较为繁杂，层次也多，在使用之前所学习的DOM来获取某个元素会非常难受，所以使用HTML
DOM会清晰很多。
//使用HTML DOM来获取表格元素
var table =
document.getElementsByTagName(‘table‘)[0]; //获取table引用
//按照之前的DOM节点方法获取<caption>
alert(table.children[0].innerHTML);
//获取caption的内容
PS：这里使用了children[0]本身就忽略了空白，如果使用firstChild或者childNodes[0]需要更多的代码（基础篇中的去处空白文本节点代码）。
//按HTML DOM来获取表格的<caption>
alert(table.caption.innerHTML);
//获取caption的内容
//按HTML
DOM来获取表头表尾<thead>、<tfoot>
alert(table.tHead);
//获取表头
alert(table.tFoot);
//获取表尾
//按HTML DOM来获取表体<tbody>
alert(table.tBodies);
//获取表体的集合
PS：因为在一个表格中<thead>和<tfoot>是唯一的，只能有一个。而<tbody>不是唯一的可以有多个，这样导致最后返回的<thead>和<tfoot>是元素引用，而<tbody>返回的是元素集合。
//按HTML DOM来获取表格的行数
alert(table.rows.length);
//获取行数的集合，数量
//按HTML DOM来获取表格主体（tbody）里的行数
alert(table.tBodies[0].rows.length);
//获取主体的行数的集合，数量
//按HTML DOM来获取表格主体内第一行的单元格数量(tr)
alert(table.tBodies[0].rows[0].cells.length);
//获取第一行单元格的数量
//按HTML DOM来获取表格主体内第一行第一个单元格的内容(td)
alert(table.tBodies[0].rows[0].cells[0].innerHTML);
//获取第一行第一个单元格的内容
//按HTML DOM来删除标题、表头、表尾、行、单元格
table.deleteCaption();
//删除标题
table.deleteTHead();
//删除<thead>
table.tBodies[0].deleteRow(0);
//删除<tr>一行
table.tBodies[0].rows[0].deleteCell(0);
//删除<td>一个单元格
//按HTML
DOM创建一个表格
1 var table = document.createElement(‘table‘);
2
3 table.border = 1;
4
5 table.width = 300;
6
7
8
9 table.createCaption().innerHTML = ‘人员表‘;
10
11
12
13 //table.createTHead();
14
15 //table.tHead就表示返回thead的引用，但不建议这么做，会混淆
16
17 //table.tHead.insertRow(0);
18
19 var thead = table.createTHead();
20
21
22
23 var tr = thead.insertRow(0);
24
25 var td1 = tr.insertCell(0);
26
27 td1.appendChild(document.createTextNode(‘数据1‘));
28
29 var td2 = tr.insertCell(1);
30
31 td2.appendChild(document.createTextNode(‘数据2‘));
32
33 /*或者
34
35 var tr = thead.insertRow(0);
36
37 tr.insertCell(0).innerHTML = ‘数据1‘;
38
39 tr.insertCell(1).innerHTML = ‘数据2‘;
40
41 tr.insertCell(2).innerHTML = ‘数据3‘;
42
43 */
44
45 document.body.appendChild(table);
PS：在创建表格的时候<table>、<tbody>、<th>没有特定的方法，需要使用document来创建。也可以模拟已有的方法来编写特定的函数即可，例如：insertTH()之类的。