JavaScript学习笔记：动态添加与删除表格行_js表格动态添加和删除行

作者：我家小花儿 | 2024-06-03 21:00:59

踩

js表格动态添加和删除行

文章目录

一、添加表格行与单元格
二、动态删除表格行与单元格
三、案例演示1
四、案例演示2

一、添加表格行与单元格

Javascript可以控制table，动态的插入行和单元格。rows保存着<tbody>元素中行的HTMLCollection。

语法：tableObject.insertRow(index)

该方法创建一个新的TableRow对象，表示一个新的<tr>标记，用于在表格中的指定位置插入一个新行，并返回这个新插入的行TableRow，新行将被插入index 所在行之前。若index等于表中的行数，则新行将被附加到表的末尾。如果表是空的，则新行将被插入到一个新的<tbody> 段，该段自身会被插入表中。若参数index 小于 0 或大于表中的行数，该方法将抛出代码为INDEX_SIZE_ERR 的DOMException 异常。

table.insertRow()，默认添加到最后一行，统计行数：table.rows.length

cells保存着<tr>元素中单元格的HTMLCollectioin集合；insertCell(pos) 向cells集合的指定位置插入一个单元格，并返回引用；table.insertCell()，默认添加到最后一列，还可以根据需要动态改变单元格的属性，统计列数：table.rows.item(0).cells.length。

二、动态删除表格行与单元格

语法：table.deleteRow(index) 用来删除指定位置的行。

row.deleteCell(index) 用来/删除指定位置的单元格;

DOM方法：removeChild(node)用来删除子节点（元素）；

parentNode 用来获取节点（元素）的父节点。

三、案例演示1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态添加与删除表格行</title>
	</head>
	<body style="text-align: center;">
		<button onclick="addRow()">添加一行表格</button>
		<button onclick="removeLastRow()">删除末行表格</button>
		<hr />
		<table id='stu' align="center" width="300" cellpadding="5" border="1">
			<caption>
				<font size="5">学生基本信息表</font>
			</caption>
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
		</table>
		<p id='recno'>记录数：0</p>
		<script>
			var no = 0;

			function addRow() {
				no++;
				var tab = document.getElementById('stu'); // 获取表格元素
				var r = tab.insertRow(); // 插入一行
				r.attributes.id = no;
				var c1 = r.insertCell(0); // 插入第一个单元格
				var c2 = r.insertCell(1); // 插入第二个单元格
				var c3 = r.insertCell(2); // 插入第三个单元格
				c1.innerHTML = 'lzy' + no;
				c2.innerHTML = '学生' + no;
				c3.innerHTML = parseInt((Math.random() * 3) + 17);
				var recno = document.getElementById('recno');
				recno.innerText = '记录数：' + (tab.rows.length - 1);
			}

			function removeLastRow() {
				if (no == 0) {
					alert('没有记录可删除！')
					return;
				}
				var tab = document.getElementById('stu'); // 获取表格元素								
				tab.deleteRow(no);
				no--;
				var recno = document.getElementById('recno');
				recno.innerText = '记录数：' + (tab.rows.length - 1);
			}
		</script>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

运行效果如下：
在这里插入图片描述
上述案例只能删除表格的末行，不能根据用户要求删除指定行，下面演示如何删除指定的表格行。

四、案例演示2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态添加与删除表格行</title>
	</head>
	<body style="text-align: center;">
		<button onclick="addRow()">添加一行表格</button>		
		<hr />
		<table id='stu' align="center" width="300" cellpadding="5" border="1">
			<caption>
				<font size="5">学生基本信息表</font>
			</caption>
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>操作</th>
			</tr>
		</table>
		<p id='recno'>记录数：0</p>
		<script>
			var no = 0;

			function addRow() {
				no++;
				var tab = document.getElementById('stu'); 
				var r = tab.insertRow(); 
				r.attributes.id = no;
				var c1 = r.insertCell(0); 
				var c2 = r.insertCell(1); 
				var c3 = r.insertCell(2); 
				var c4 = r.insertCell(3);
				c1.innerHTML = 'lzy' + no;
				c2.innerHTML = '学生' + no;
				c3.innerHTML = parseInt((Math.random() * 3) + 17);
				c4.innerHTML = '<a href="#" οnclick="delRow(this);">删除</a>'
				var recno = document.getElementById('recno');
				recno.innerText = '记录数：' + (tab.rows.length - 1);
			}

			function delRow(obj) {				
				var tab = document.getElementById('stu'); 	
				var rowIndex = obj.parentNode.parentNode.rowIndex;
				tab.deleteRow(rowIndex);
				no--;
				var recno = document.getElementById('recno');
				recno.innerText = '记录数：' + (tab.rows.length - 1);
			}
		</script>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

运行效果如下：
在这里插入图片描述

var rowIndex = obj.parentNode.parentNode.rowIndex;
1

在delRow(obj)方法里，参数obj是单元格里的超链接，obj.parentNode就是包含它的单元格，obj.parentNode.parentNode就是包含它的单元格所在的表格行，obj.parentNode.parentNode.rowIndex就是就是包含它的单元格所在的表格行的行索引。

一般删除某个东西时，要弹出一个消息框询问用户是否要删除。

在这里插入图片描述
运行效果如下：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/668908