DOM系列---DOM操作表格

DOM在操作生成HTML上，还是比较简明的。不过，由于浏览器总是存在兼容和陷阱，导致最终的操作就不是那么简单方便了。本篇章主要了解一下DOM操作表格。

一．操作表格

<table>标签是HTML中结构最为复杂的一个，我们可以通过DOM来创建生成它，或者HTML DOM来操作它。(PS：HTML DOM提供了更加方便快捷的方式来操作HTML，有手册)。

html代码部分：

//需要操作的table

 <table border="1" width="300">

        <caption>人员表</caption>

        <thead>

               <tr>

                      <th>姓名</th>

                      <th>性别</th>

                      <th>年龄</th>

               </tr>

        </thead>

        <tbody>

               <tr>

                      <td>张三</td>

                      <td>男</td>

                      <td>20</td>

               </tr>

               <tr>

                      <td>李四</td>

                      <td>女</td>

                      <td>22</td>

               </tr>

        </tbody>

        <tfoot>

               <tr>

                      <td colspan="3">合计：N</td>

               </tr>

        </tfoot>

 </table>

注意：caption标签在一个表格里只有一个

　　　thead标签在一个表格里只能有一个

tfoot标签在一个表格里只能有一个

tbody标签在一个表格里可以有N个

tr，td和th标签在一个表格里可以有N个

JS代码部分：

 //使用DOM来创建这个表格

        var table = document.createElement('table');

        table.border = 1;

        table.width = 300;

        var caption = document.createElement('caption');

        table.appendChild(caption);

        caption.appendChild(document.createTextNode('人员表'));

        var thead = document.createElement('thead');

        table.appendChild(thead);

        var tr = document.createElement('tr');

        thead.appendChild(tr);

        var th1 = document.createElement('th');

        var th2 = document.createElement('th');

        var th3 = document.createElement('th');

        tr.appendChild(th1);

        th1.appendChild(document.createTextNode('姓名'));

        tr.appendChild(th2);

        th2.appendChild(document.createTextNode('性别'));

        tr.appendChild(th3);

        th3.appendChild(document.createTextNode('年龄'));  

        document.body.appendChild(table);

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创建一个表格     

 var table = document.createElement('table');

        table.border = 1;

        table.width = 300;

        table.createCaption().innerHTML = '人员表';

        //table.createTHead(); 

15　　　　 //table.tHead就表示返回thead的引用，但不建议这么做，会混淆

        //table.tHead.insertRow(0);

        var thead = table.createTHead();

        var tr = thead.insertRow(0);

        var td1 = tr.insertCell(0);

        td1.appendChild(document.createTextNode('数据1'));

        var td2 = tr.insertCell(1);

        td2.appendChild(document.createTextNode('数据2'));

        /*或者

        var tr = thead.insertRow(0);

        tr.insertCell(0).innerHTML = '数据1';

        tr.insertCell(1).innerHTML = '数据2';

        tr.insertCell(2).innerHTML = '数据3';

        */

        document.body.appendChild(table);

PS：在创建表格的时候<table>、<tbody>、<th>没有特定的方法，需要使用document来创建。也可以模拟已有的方法来编写特定的函数即可，例如：insertTH()之类的。