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對象。