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() 在表格中插入一个新行。

三、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>表格专题</title>

 </head>

 <body>

     <table id="tab" border="1">

     <caption>表格名称</caption>

     <thead>

         <tr>

             <th colspan="3">标题1</th>

         </tr>

     </thead>

     <tbody>

         <tr>

             <td>单元格11</td>

             <td>单元格12</td>

             <td>单元格13</td>

         </tr>

         <tr>

             <td>单元格21</td>

             <td>单元格22</td>

             <td>单元格23</td>

         </tr>

         <tr>

             <td>单元格31</td>

             <td>单元格32</td>

             <td>单元格33</td>

         </tr>

         </tbody>

         <tfoot><td>备注：</td><td colspan="2"></td></tfoot>

     </table>

     <p><input type="button" value="增加行" onclick="addtr()">

     <input type="button" value="删除行" onclick=""></p>

     <p><input type="button" value="删除标题" onclick="">

     <input type="button" value="添加标题" onclick=""></p>

     <script type="text/javascript">

     /*

         var tab=document.getElementById('tab') //获取表格元素

         var rows=tab.rows; //返回包含表格中所有行的一个数组。

         cells=rows[1].cells //某一行的单元格

         alert(rows[1].cells[2].innerHTML)

         rows[1].cells[2].innerHTML='数据13';

         rows[1].cells[2].style.color='red'

         */

         /*

     //增加行的方法1

     function addtr(){

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

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

     }

     // addtr()

     // addtr()

     */

     //增加行的方法2

      //更加的灵活

     function addtr(){

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

         var tradd=tab.insertRow(4)

         tradd.style.background='green'

         tradd.innerHTML='<td>新增01</td><td>新增02</td><td>新增03</td>'

     }

     tab.deleteRow(0)

     tab.deleteRow(0)

     </script>

 </body>

 </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>'