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()之类的。