> 一、总结(点击显示或隐藏总结内容)
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() 在表格中插入一个新行
三、代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格专题</title> </head> <body> <table id="tab" border="1"> <caption>表格名称</caption> <thead> <tr> <th colspan="3">标题1</th> </tr> </thead> <tbody> <tr> <td>单元格11</td> <td>单元格12</td> <td>单元格13</td> </tr> <tr> <td>单元格21</td> <td>单元格22</td> <td>单元格23</td> </tr> <tr> <td>单元格31</td> <td>单元格32</td> <td>单元格33</td> </tr> </tbody> <tfoot><td>备注:</td><td colspan="2"></td></tfoot> </table> <p><input type="button" value="增加行" οnclick="addtr()"> <input type="button" value="删除行" οnclick=""></p> <p><input type="button" value="删除标题" οnclick=""> <input type="button" value="添加标题" οnclick=""></p> <script type="text/javascript"> /* var tab=document.getElementById('tab') //获取表格元素 var rows=tab.rows; //返回包含表格中所有行的一个数组。 cells=rows[1].cells //某一行的单元格 alert(rows[1].cells[2].innerHTML) rows[1].cells[2].innerHTML='数据13'; rows[1].cells[2].style.color='red' */ /* //增加行的方法1 function addtr(){ var tab=document.getElementById('tab'); tab.innerHTML+='<tr style="background: green"><td>新增01</td><td>新增02</td><td>新增03</td></tr>' } // addtr() // addtr() */ //增加行的方法2 //更加的灵活 function addtr(){ var tab=document.getElementById('tab'); var tradd=tab.insertRow(4) tradd.style.background='green' tradd.innerHTML='<td>新增01</td><td>新增02</td><td>新增03</td>' } tab.deleteRow(0) tab.deleteRow(0) </script> </body> </html>