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