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