js如何实现动态的在表格中添加和删除行？（两种方法）

时间：2024-03-05 13:46:50

js如何实现动态的在表格中添加和删除行？（两种方法）

一、总结

1、table元素有属性和一些方法（js使用）

方法一：添加可通过在table的innerHTML属性中添加tr和td来实现

tab.innerHTML+=\'<tr style="background: green"><td>新增01</td><td>新增02</td><td>新增03</td></tr>\'

方法二：通过table的属性insertRow()，deleteRow()来实现

var tradd=tab.insertRow(4)  返回值是表格行元素

方法一和方法二对比：

相同点：

都是给元素增加innerHTML

不同点：

方法二灵活超级多：方法一是给table增加innerHTML，方法二是给行元素增加innerHTML，当然方法二要灵活的多

 

二、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=""></p>
36     <p><input type="button" value="删除标题" onclick="">
37     <input type="button" value="添加标题" onclick=""></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     </script>
67 </body>
68 </html>

 

四、测试题-简答题

1、js的字符串中双引号套双引号肯定是错误的，怎么解决这个问题？

解答：将外面的双引号改为单引号，js字符串规范为单引号，html属性规范为双引号：

tab.innerHTML+=\'<tr style="background: green"><td>新增01</td><td>新增02</td><td>新增03</td></tr>\'

2、table属性innerHTML和table方法insertRow的层级关系如何？

解答：都在同一级，都是getElementById获取元素后直接点的方式，var tab=document.getElementById(\'tab\');

3、table方法insertRow插入行后，如何修改插入这行的背景颜色和内容？

解答：insertRow方法有返回值，返回值就是插入的这行的对象，所以我们可以给这个对象设置style和innerHTML来实现插入背景颜色和内容。

var tradd=tab.insertRow(4)
tradd.style.background=\'green\'
tradd.innerHTML=\'<td>新增01</td><td>新增02</td><td>新增03</td>\'

 

相关文章