js如何实现动态在表格中添加标题和去掉标题？
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
js如何实现动态在表格中添加标题和去掉标题？
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//更加的灵活
58function addtr(){
59var tab=document.getElementById('tab');
60var 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)
66function deltr(){
67var tab=document.getElementById('tab');
68var rows=tab.rows;
69var rlen=rows.length //当前的⾏数
70 tab.deleteRow(rlen-1)
71 }
72function delCap(){
73// var tab=document.getElementById('tab');
74// tab.deleteCaption()
75 document.getElementById('tab').deleteCaption()
76 }
77function creCap(){
78var 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对象。