首页 > 代码库 > DOM系列---DOM操作表格

DOM系列---DOM操作表格

2024-07-07 00:37:14   230人阅读

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

 


联系
我们