JavaScript实现表格添加和删除行

最新推荐文章于 2023-09-21 15:57:23 发布

原创最新推荐文章于 2023-09-21 15:57:23 发布 · 2.5k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #前端

JavaScript 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了一种使用HTML和JavaScript实现的动态表格增删行功能。通过代码示例展示了如何在网页上创建一个可交互的表格，用户可以点击按钮添加新的行或删除已有的行。此功能对于需要实时更新数据的网页应用非常实用。

效果展示

添加

删除

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<input type="button" onclick="addRow();" value="添加">
		<table id="myTable" border="1" cellspacing="0" cellpadding="0">
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>密码</th>
				<th>年龄</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>123456</td>
				<td>24</td>
				<td><input type="button" value="删除" onclick="deleteRow(this)" /></td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>123456</td>
				<td>20</td>
				<td><input type="button" value="删除" onclick="deleteRow(this)" /></td>
			</tr>
			<tr>
				<td>3</td>
				<td>王五</td>
				<td>987412</td>
				<td>14</td>
				<td><input type="button" value="删除" onclick="deleteRow(this)" /></td>
			</tr>
		</table>
		<script type="text/javascript">
			// 删除行,参数为行对象
			function deleteRow(row) {
				var tr = row.parentNode.parentNode;
				tr.parentNode.removeChild(tr);
			}


			// 添加行
			function addRow() {
				// 获取表格对象
				var myTable = document.getElementById("myTable");

				// 创建表格行元素
				var tr = document.createElement("tr");

				// 创建表格列元素
				// 第一列
				var td_1 = document.createElement("td");
				// 设置td中的内容
				td_1.innerHTML = "10";
				// 将表格列添加到表格行中
				tr.appendChild(td_1);
				// 第二列
				var td_2 = document.createElement("td");
				td_2.innerHTML = "武十";
				tr.appendChild(td_2);
				// 第三列
				var td_3 = document.createElement("td");
				td_3.innerHTML = "abcdef";
				tr.appendChild(td_3);
				// 第四列
				var td_4 = document.createElement("td");
				td_4.innerHTML = "50";
				tr.appendChild(td_4);
				// 第五列
				var td_5 = document.createElement("td");
				td_5.innerHTML = "<input type='button' value='删除' onclick='deleteRow(this)' />"
				tr.appendChild(td_5);

				// 将表格行添加到表格中
				myTable.appendChild(tr);
			}
		</script>
	</body>
</html>