JavaScript实现表格添加和删除行

最新推荐文章于 2023-10-11 17:30:01 发布

二木成林

最新推荐文章于 2023-10-11 17:30:01 发布

阅读量2.2k

点赞数 1

分类专栏： # JavaScript 文章标签： JavaScript 前端

本文链接：https://blog.csdn.net/cnds123321/article/details/102622923

版权

JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

效果展示

添加

删除

代码

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

二木成林

关注

1
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现表格添加和删除行

效果展示添加删除代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> </head> <body> <input type="button" onclick="addRow();" value="添加"> <t...
复制链接

扫一扫