js如何实现动态的在表格中添加和删除行?(两种方法)

时间:2022-06-02 06:15:02

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() 在表格中插入一个新行。

三、代码

 <!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="增加行" onclick="addtr()">
<input type="button" value="删除行" onclick=""></p>
<p><input type="button" value="删除标题" onclick="">
<input type="button" value="添加标题" onclick=""></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>

四、测试题-简答题

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