微信扫一扫打赏支持

js如何实现动态在表格中添加标题和去掉标题？

js如何实现动态在表格中添加标题和去掉标题？

一、总结

1、通过table标签的createCaption()，deleteCaption()方法实现。

document.getElementById('tab').deleteCaption()

var cap=document.getElementById('tab').createCaption();

 

 

二、js如何实现动态在表格中添加标题和去掉标题？

1、插入删除表格标题案例

  • 实例描述：

    动态的插入删除行以及表格标题等

  • 案例要点：

    掌握table对象的insertRow()，deleteRow()，createCaption()，deleteCaption()等方法。

 

2、用到的table的方法和属性

Table 对象方法
  • createCaption() 为表格创建一个 caption 元素。
  • createTFoot() 在表格中创建一个空的 tFoot 元素。
  • createTHead() 在表格中创建一个空的 tHead 元素。
  • deleteCaption() 从表格删除 caption 元素以及其内容。
  • deleteRow() 从表格删除一行。
  • deleteTFoot() 从表格删除 tFoot 元素及其内容。
  • deleteTHead() 从表格删除 tHead 元素及其内容。
  • insertRow() 在表格中插入一个新行。

 

三、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表格专题</title>
 6 </head>
 7 <body>
 8     <table id="tab" border="1">
 9     <caption>表格名称</caption>
10     <thead>
11         <tr>
12             <th colspan="3">标题1</th>
13         </tr>
14     </thead>
15     <tbody>
16         <tr>
17             <td>单元格11</td>
18             <td>单元格12</td>
19             <td>单元格13</td>
20         </tr>
21         <tr>
22             <td>单元格21</td>
23             <td>单元格22</td>
24             <td>单元格23</td>
25         </tr>
26         <tr>
27             <td>单元格31</td>
28             <td>单元格32</td>
29             <td>单元格33</td>
30         </tr>
31         </tbody>
32         <tfoot><td>备注：</td><td colspan="2"></td></tfoot>
33     </table>
34     <p><input type="button" value="增加行" onclick="addtr()">
35     <input type="button" value="删除行" onclick="deltr()"></p>
36     <p><input type="button" value="删除标题" onclick="delCap()">
37     <input type="button" value="添加标题" onclick="creCap()"></p>
38     <script type="text/javascript">
39     /*
40         var tab=document.getElementById('tab') //获取表格元素
41         var rows=tab.rows; //返回包含表格中所有行的一个数组。
42         cells=rows[1].cells //某一行的单元格
43         alert(rows[1].cells[2].innerHTML)
44         rows[1].cells[2].innerHTML='数据13';
45         rows[1].cells[2].style.color='red'
46         */
47         /*
48     //增加行的方法1
49     function addtr(){
50         var tab=document.getElementById('tab');
51         tab.innerHTML+='<tr style="background: green"><td>新增01</td><td>新增02</td><td>新增03</td></tr>'
52     }
53     // addtr()
54     // addtr()
55     */
56     //增加行的方法2
57      //更加的灵活
58     function addtr(){
59         var tab=document.getElementById('tab');
60         var tradd=tab.insertRow(4)
61         tradd.style.background='green'
62         tradd.innerHTML='<td>新增01</td><td>新增02</td><td>新增03</td>'    
63     }
64     //tab.deleteRow(0)
65     // tab.deleteRow(0)
66     function deltr(){
67         var tab=document.getElementById('tab');
68         var rows=tab.rows;
69         var rlen=rows.length //当前的行数
70         tab.deleteRow(rlen-1)
71     }
72     function delCap(){
73     // var tab=document.getElementById('tab');
74     // tab.deleteCaption()
75     document.getElementById('tab').deleteCaption()
76     }
77     function creCap(){
78         var cap=document.getElementById('tab').createCaption();
79         cap.innerHTML='createCaption()增加的标题'
80         cap.style.color='green';
81 
82     }
83     </script>
84 </body>
85 </html>

 

 

 

四、测试题-简答题

1、表格动态添加行和删除行所用到的table标签方法?

解答：insertRow()，deleteRow() 驼峰命名法。

 

2、表格动态添加标题和删除标题所用到的table标签方法?

解答：createCaption()，deleteCaption() 驼峰命名法，这里是create。

 

3、表格动态添加行和动态添加标题的标签方法区别？

解答：一个是insert，一个是create。

 

4、表格insertRow或者createCaption出来的行或者标题有内容么？

解答：没有，都是空的，方法的返回值是标签，可以通过标签的innerHTML属性添加内容。

 

5、表格标签createCaption()方法的返回值是什么？

解答：caption标签。

 

6、如何给createCaption()方法动态创建出来的表格标题添加背景色？

解答：获取createCaption()方法创建出来的caption标签，给caption标签的style中的background赋值颜色即可。

 

7、如何保证表格动态删除行的时候都是删除的最后一行？

解答：删除前都动态获取表格的行数，然后就删最后一行。

 

8、如何动态获取表格的行数？

解答：table.rows.length。

 

9、document.getElementById('tab')获取的是什么，tab是一个表格的id？

解答：table标签，也就是dom中的table对象。

 

posted @ 2018-05-28 23:28  范仁义  阅读(3223)  评论(0)  编辑  收藏  举报