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