JS对html表格数据进行增删改

最新推荐文章于 2024-05-30 13:59:14 发布

郁闷土豆

最新推荐文章于 2024-05-30 13:59:14 发布

阅读量3.2k

点赞数 6

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_44876173/article/details/90447946

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JS对html表格数据进行增删改

效果图：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<button onclick="showInfo()">添加</button>
			<button onclick="getSelectEl()">删除</button>
			<button onclick="delAll()">删除全部</button>
		</div>
		<div id="divInfo">
			<p>
				姓名：<input id="txtName" type="text" />
			</p>
			<p>
				性别：<select id="selSex">
					<option>男</option>
					<option>女</option>
					<option>未知</option>
				</select>
			</p>
			<p>
				年龄：<input id="txtAge" type="text" />
			</p>
			<p>
				<button id="butOk" onclick="addInfo()">确认添加</button>
			</p>
		</div>
		<div>
			<table width="400px" border="1px" cellspacing="0">
				<thead>
					<tr>
						<th><input type="checkbox"/></th>
						<th>ID</th>
						<th>姓名</th>
						<th>性别</th>
						<th>年龄</th>
						<th></th>
					</tr>
				</thead>
				<tbody id="tab1"></tbody>
			</table>
		</div>
	</body>
	<script>
		var tab1 = document.getElementById("tab1");
		var code = 1;
		var row;
		function showInfo(){
			var divInfo = document.getElementById("divInfo");
			//判断该层是否显示,显示则隐藏,隐藏则显示
			divInfo.style.display = divInfo.style.display=="none"?"block":"none";
			// console.log(divInfo.style.display);
		}
		function addInfo(){
			//得到文本框中的值
			var name = document.getElementById("txtName").value;
			var sex = document.getElementById("selSex").value;
			var age = document.getElementById("txtAge").value;
			// console.log(name,sex,age);
			//创建新元素
			var tr = document.createElement("tr");
			id = "tr"+code;
			tr.setAttribute("id",id);
			var td1 = document.createElement("td");
			var td2 = document.createElement("td");
			var td3 = document.createElement("td");
			var td4 = document.createElement("td");
			var td5 = document.createElement("td");
			var td6 = document.createElement("td");
			//往元素中添加内容
			td1.innerHTML = "<input type='checkbox'/>";
			td2.innerHTML = code;
			td3.innerHTML = name;
			td4.innerHTML = sex;
			td5.innerHTML = age;
			td6.innerHTML = "<button οnclick='edit(this.parentNode.parentNode)'>编辑</button><button οnclick='delById(\""+id+"\")'>删除</button>";
			//把元素依次添加进去
			tr.appendChild(td1);
			tr.appendChild(td2);
			tr.appendChild(td3);
			tr.appendChild(td4);
			tr.appendChild(td5);
			tr.appendChild(td6);
			tab1.appendChild(tr);
			code++;//id自增
		}
		// 删除信息
		function delById(id){
			var tr = document.getElementById(id);
			tab1.removeChild(tr);
		}
		//编辑信息,把表格中的信息传递到文本框内
		function edit(el){
			row = el;//保存要编辑的是哪行
			var name = el.childNodes[2].innerHTML;
			var sex = el.childNodes[3].innerHTML;
			var age = el.childNodes[4].innerHTML;
			document.getElementById("txtName").value = name;
			document.getElementById("selSex").value = sex;
			document.getElementById("txtAge").value = age;
			//更改按钮的文字,把按钮调用的方法改为修改的方法
			document.getElementById("butOk").innerHTML = "确认修改";
			document.getElementById("butOk").setAttribute("onclick","editSave()");
		}
		//确认修改,修改表格中的信息
		function editSave(){
			var name = document.getElementById("txtName").value;
			var sex = document.getElementById("selSex").value;
			var age = document.getElementById("txtAge").value;
			// console.log(row);
			row.childNodes[2].innerHTML = name;
			row.childNodes[3].innerHTML = sex;
			row.childNodes[4].innerHTML = age;
			document.getElementById("butOk").innerHTML = "确认添加";
			document.getElementById("butOk").setAttribute("onclick","addInfo()");
		}
		//得到复选框勾选的的都有那行,点击上面的删除会把选中的信息依次删除掉
		function getSelectEl(){
			var cks = Array.from(tab1.getElementsByTagName("input"));
			cks.forEach(ck=>{
				if(ck.checked){
					tab1.removeChild(ck.parentNode.parentNode);
				}
			});
		}
		//删除所有,直接把表格中的代码变成"",即可达到删除效果
		function delAll(){
			tab1.innerHTML="";
		}
	</script>
</html>

郁闷土豆

关注

6
点赞
踩
49

收藏

觉得还不错? 一键收藏
1
评论
JS对html表格数据进行增删改

JS对html表格数据进行增删改效果图：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div> <button onclick="s...
复制链接

扫一扫