JS实现简单的表单增加删除功能_javascript增加与删除的代码-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41355758/article/details/89159368

本文介绍了一种使用HTML、CSS和JavaScript实现表格数据动态添加和删除的方法。通过创建可复用的行和单元格元素，实现了用户输入数据后即时更新表格的功能，并提供了删除已有数据行的能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分：

<div>
	<label for="">编号：</label><input type="text" id="txt1">
	<label for="">姓名：</label><input type="text" id="txt2">
	<label for="">住址：</label><input type="text" id="txt3">
	<button id="btn">添加</button>
	<table>
		<tbody id="body">
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>住址</th>
				<th>操作</th>
			</tr>
		</tbody>
	</table>
</div>

css部分：

*{
	margin: 0;
	padding: 0;
}
div{
	width: 80%;
	margin: 20px auto;
	text-align: center;
}
table{
	margin-top: 30px;
	border-collapse: collapse;
}
tr td,tr th{
	border: 1px solid gray;
	width: 300px;
	line-height: 35px;
	text-align: center;
}

JS部分：

var id = document.getElementById('txt1');				//编号
var xname = document.getElementById('txt2');			//姓名
var address = document.getElementById('txt3');			//地址
var btn = document.getElementById('btn');				//添加按钮
var tbody = document.getElementById('body');
//添加点击事件
btn.onclick = function () {
	var tr = createTr();
	tbody.appendChild(tr);
};
//创建行
function createTr() {
	var tr = document.createElement('tr');
	var td1 = createCell(id.value,false);
	var td2 = createCell(xname.value,false);
	var td3 = createCell(address.value,false);
	var td4 = createCell("删除",true);
	tr.appendChild(td1);
	tr.appendChild(td2);
	tr.appendChild(td3);
	tr.appendChild(td4);
	return tr;
}
//创建列
function createCell(value,isLink) {
	var cell = document.createElement('td');
	if(isLink){
		var link = document.createElement('a');
		link.href = '#';
		link.innerHTML = value;
		cell.appendChild(link);
		link.onclick = function () {
			var tr = this.parentNode.parentNode;
			tr.parentNode.removeChild(tr);
		}
	}else{
		cell.innerHTML = value;
	}
	
	return cell;
}

整体代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 80%;
			margin: 20px auto;
			text-align: center;
		}
		table{
			margin-top: 30px;
			border-collapse: collapse;
		}
		tr td,tr th{
			border: 1px solid gray;
			width: 300px;
			line-height: 35px;
			text-align: center;
		}
	</style>
</head>
<body>
	<div>
		<label for="">编号：</label><input type="text" id="txt1">
		<label for="">姓名：</label><input type="text" id="txt2">
		<label for="">住址：</label><input type="text" id="txt3">
		<button id="btn">添加</button>
		<table>
			<tbody id="body">
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>住址</th>
					<th>操作</th>
				</tr>
			</tbody>
		</table>
	</div>
	<script type="text/javascript">
		var id = document.getElementById('txt1');			//编号
		var xname = document.getElementById('txt2');			//姓名
		var address = document.getElementById('txt3');		//地址
		var btn = document.getElementById('btn');			//添加按钮
		var tbody = document.getElementById('body');
		//添加点击事件
		btn.onclick = function () {
			var tr = createTr();
			tbody.appendChild(tr);
		};
		function createTr() {
			var tr = document.createElement('tr');
			var td1 = createCell(id.value,false);
			var td2 = createCell(xname.value,false);
			var td3 = createCell(address.value,false);
			var td4 = createCell("删除",true);
			tr.appendChild(td1);
			tr.appendChild(td2);
			tr.appendChild(td3);
			tr.appendChild(td4);
			return tr;
		}
		function createCell(value,isLink) {
			var cell = document.createElement('td');
			if(isLink){
				var link = document.createElement('a');
				link.href = '#';
				link.innerHTML = value;
				cell.appendChild(link);
				//点击删除时，删除一行
				link.onclick = function () {
					var tr = this.parentNode.parentNode;
					tr.parentNode.removeChild(tr);
				}
			}else{
				cell.innerHTML = value;
			}
			
			return cell;
		}
	</script>
</body>
</html>

效果图：
在这里插入图片描述
我们当我们点击添加的时候向里面添加一行信息：
点击添加前：

点击添加后：

当我们点击删除时，删除一行：
点击删除前：

点击删除后：

此篇博文中存在的bug在下一篇博文中已完善，详情参见：完整代码