Document原生态JS实现table表的增删改页面demo

最新推荐文章于 2023-12-12 14:06:06 发布

原创最新推荐文章于 2023-12-12 14:06:06 发布 · 458 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#原生态js #js

JS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的动态表格操作案例，包括新增、更新和删除行的功能。通过事件监听和DOM操作，实现了对表格数据的实时修改。

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

table.html和table.js放在一个目录下

table.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.tb{
			width: 80%;
			margin: 0 auto;
			border-collapse: collapse;
		}
		.tb th,.tb td{
			border:1px solid #ccc;
			padding: 10px;
			text-align: center;
		}
	</style>
	<script type="text/javascript" src="table.js"></script>
</head>
<body>
	<table class="tb">
		<caption><input class="add" type="button" value="新增"></caption>
		<tr>
			<th>编号</th>
			<th>账号</th>
			<th>密码</th>
			<th>邮箱</th>
			<th>操作</th>
		</tr>
		<tr>
			<td>10001</td>
			<td>admin1</td>
			<td>123</td>
			<td>admin@qq.com</td>
			<td>
				<input class="del" type="button" value="删除">
				<input class="upd" type="button" value="更新">
			</td>
		</tr>
		<tr>
			<td>10002</td>
			<td>admin2</td>
			<td>123</td>
			<td>admin@qq.com</td>
			<td>
				<input class="del" type="button" value="删除">
				<input class="upd" type="button" value="更新">
			</td>
		</tr>
		<tr>
			<td>10003</td>
			<td>admin3</td>
			<td>123</td>
			<td>admin@qq.com</td>
			<td>
				<input class="del" type="button" value="删除">
				<input class="upd" type="button" value="更新">
			</td>
		</tr>
		<tr>
			<td>10004</td>
			<td>admin4</td>
			<td>123</td>
			<td>admin@qq.com</td>
			<td>
				<input class="del" type="button" value="删除">
				<input class="upd" type="button" value="更新">
			</td>
		</tr>
	</table>
	<script type="text/javascript" src="table.js"></script>
</body>
</html>

table.js


var index = 1;
//定义删除的函数（声明式函数，函数表达式）
/**
 * btn 代表当前被点击的按钮对象
 */
function _delete(btn){
	btn.parentNode.parentNode.remove();
}




/**
 * 定义操作的更新函数
 */
function _update(btn){
	//获取当前按钮的名称
	var name = btn.value;

	//获取当前更新的行
	var tr = btn.parentNode.parentNode;
	//var tds = tr.childNodes;//包括所有的节点[文本节点->换行]
	var tds = tr.children;//获取所有元素

	if (name=="更新") {
		btn.value = "保存";
		//排除最后一列
		for (var i = 0; i < tds.length-1; i++) {
			//获取当前遍历的元素对象
			var td = tds[i];
			//获取当前单元格中的值
			var value = td.firstChild.nodeValue;
			td.firstChild.remove();
			//创建一个文本框元素
			var input = document.createElement("input");
			input.type="text";
			input.value=value;
			//把创建的文本框追加到当前的单元格中
			td.appendChild(input);
		}
	}else{
		btn.value="更新";
		//排除最后一列
		for (var i = 0; i < tds.length-1; i++) {
			//获取当前遍历的元素对象
			var td = tds[i];
			//获取当前单元格中的值
			var input = td.firstChild;
			var value = input.value;
			//一处当前单元格所在的文本框
			input.remove();
			//创建一个文本框元素
			var text = document.createTextNode(value);
			//把创建的文本框追加到当前的单元格中
			td.appendChild(text);
		}
	}
}

/**
 * 定义新增的函数
 */
function _add(){
	//先创建行
	var tr = document.createElement("tr");

	//创建1列
	var td1 = document.createElement("td");
	td1.innerHTML = (10004+index);
	//创建2列
	var td2 = document.createElement("td");
	td2.innerHTML = ("admin11"+index);
	//创建3列
	var td3 = document.createElement("td");
	td3.innerHTML = (123123);
	//创建4列
	var td4 = document.createElement("td");
	td4.innerHTML = (td2.innerHTML+"@qq.com");
	//创建第五列
	var td5 = document.createElement("td");

	//创建2个按钮
	var deleteBtn = document.createElement("input");
	var updateBtn = document.createElement("input");
	deleteBtn.type = "button";
	updateBtn.type = "button";
	//注册事件
	deleteBtn.setAttribute("onclick","_delete(this)");
	updateBtn.setAttribute("onclick","_update(this)");
	//设置按钮的名称
	deleteBtn.value = "删除";
	updateBtn.value = "修改";

	td5.appendChild(deleteBtn);
	td5.appendChild(document.createTextNode(" "));
	td5.appendChild(updateBtn);


	//把每一个列追加到行中
	tr.appendChild(td1);
	tr.appendChild(td2);
	tr.appendChild(td3);
	tr.appendChild(td4);
	tr.appendChild(td5);

	//把创建的行追加到表格中
	document.querySelector(".tb").appendChild(tr); 	
	index ++;
}


(function(){
	//获取所有的del元素
	var delButtons = document.querySelectorAll(".del");
	for (var i = 0; i < delButtons.length; i++) {
		var btn = delButtons[i];
		//给当前遍历按钮注册一个点击事件
		//this 代表当前粗发事件对象
		btn.setAttribute("onclick","_delete(this)");
	};


	//获取所有的更新按钮
	var updateBtns = document.querySelectorAll(".upd");
	for (var i = 0; i < updateBtns.length; i++) {
		var updateBtn = updateBtns[i];
		//注册更新按钮的更新操作函数
		updateBtn.setAttribute("onclick","_update(this);");
	};

	//获取新增按钮
	var addBtn = document.querySelector(".add");
	addBtn.setAttribute("onclick","_add();");
})();