纯JS代码完成表格增删改查

最新推荐文章于 2023-08-30 21:07:14 发布

骆小胖

最新推荐文章于 2023-08-30 21:07:14 发布

阅读量905

点赞数 1

分类专栏： JS 常见特效教学笔录文章标签： JS 常见特效教学笔录 ViewUI

本文链接：https://blog.csdn.net/qq_42445490/article/details/88819041

版权

教学笔录同时被 3 个专栏收录

73 篇文章 0 订阅

订阅专栏

63 篇文章 0 订阅

订阅专栏

常见特效

28 篇文章 0 订阅

订阅专栏

【前言】

最近教学生用JS手写一个表格的增删改查，发现一些学生共性问题，这里简单总结下，希望有所帮助。

【主体】

问题比较多，这里大概列举几个常见的

（1）获取表单值写到了点击事件外部，导致点击按钮时获取不到表单输入值

解析：如果写到了外部，name获取到的会是初始化页面时的表单值--→即空。所以必须写到点击事件内部才能获取点击时的当前表单值。

（2）实现全选全不选

var checkBoxs = document.getElementsByName("del");
var status = me.checked;
for (var i = 0; i < checkBoxs.length; i++) {
	checkBoxs[i].checked = status;
}

（3）添加元素节点appendChild()

（4）删除节点removeChild()

（5）创建元素节点creatElement

（6）创建文本节点createTextNode

（7）同时删除多个时，普通的遍历方式删除表格会导致全选后删除失败，遗漏多行删除不了（因为每删除一个会导致表格行数改变）

1、错误方法：

var delAll = document.getElementsByName("del");
var delTr,delTb;
for (var i = 0; i < delAll.length; i++) {
	if(delAll[i].checked == true){
		delTr = delAll[i].parentNode.parentNode;
		delTb = delTr.parentNode;
		delTb.removeChild(delTr);
	}	
}

原因分析：这样写存在一个问题，当第一行被删除时，表格的结构发生了变化，以前的第i+1行变成了现在的第i行，所以按照这种写法无法遍历删除所以选中的行。正确的写法应该从最大的行号开始删除，这样第i+1行被删除后不会影响第i行在表格中的行号。

2、修改后的方法

var delAll = document.getElementsByName("del");
var delTr,delTb;
for (var i = delAll.length-1; i >= 0 ; i--) {
	if(delAll[i].checked == true){
		delTr = delAll[i].parentNode.parentNode;
		delTb = delTr.parentNode;
		delTb.removeChild(delTr);
	}	
}

3、修改优化后的方法

除了上面的方法，还有另一种就是在每次循环完毕后，执行一次 i--

var delAll = document.getElementsByName("del");
var delTr,delTb;
for (var i = 0; i < delAll.length ; i++) {
	if(delAll[i].checked == true){
		delTr = delAll[i].parentNode.parentNode;
		delTb = delTr.parentNode;
		delTb.removeChild(delTr);
	         i--;
	}	
}

（8）获取子节点

有多种方法获取，例如children()和childNodes

注意：使用childNodes获取子节点的时候，childNodes返回的是子节点的集合，是一个数组的格式。他会把换行和空格也当成是节点信息。为了不显示不必须的换行的空格，我们如果要使用childNodes就必须进行必要的过滤。通过正则表达式式取掉不必要的信息。下面是过滤

//去掉换行的空格
for(var i=0; i<b.length;i++){
    if(b[i].nodeName == "#text" && !/\s/.test(b.nodeValue)){
        document.getElementById("test").removeChild(b[i]);
    }
}

推荐：通过children来获取子节点。利用children来获取子元素是最方便的，他也会返回出一个数组。对其获取子元素的访问只需按数组的访问形式即可。

var getFirstChild = document.getElementById("test").children[0];

（9）rowIndex 属性返回某一行在表格的行集合中的位置，返回<tr></tr>在表格中的位置

最后直接上代码，直接复制粘贴即可查看效果

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>JS增删改查表格</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.control{
			width: 600px;
			margin: 10px auto;
			height: 30px;
			text-align: center;
		}
		table{
			width: 600px;
			margin: 10px auto;
			text-align: center;
		}
		#tableArea tr td a{
			display: inline-block;
			margin: 0 3px;
		}
		form{
			width: 600px;
			margin: 10px auto;
			border: 1px solid black;
			padding: 20px;
			box-sizing: border-box;
		}
		/*修改区域*/
		.changeArea{
			width: 60%;
			height: 300px;
			box-shadow: 6px 6px 3px rgba(0,0,0,0.6);
			position: fixed;
			top: 100px;
			left: 20%;
			background-color: rgba(32,42,58,0.6);
			border-radius: 10px;
			display: none;
		}
		.mainArea{
			width: 100%;
			height: 100%;
			position: relative;
			padding: 30px;
		    box-sizing: border-box;
		}
		.closeArea{
			width: 30px;
		    position: absolute;
		    right: 0px;
		    top: 0px;
		    height: 30px;
		    font-size: 21px;
		    background: transparent;
		    border: none;
		    color: white;
		    cursor: pointer;
		    border-top-right-radius: 10px;
		    outline: none;
		}
		.closeArea:hover{
			background:rgba(255,0,0,0.6);
		}
	</style>
</head>
<body>
<div class="control">
	<button οnclick="delAll()">全部删除</button>
</div>
<table border="1" cellspacing="0" id="tableArea">
	<tr>
		<th><input type="checkbox" name="delAll" οnchange="checkAll(this)"></th>
		<th>班级</th>
		<th>姓名</th>
		<th>分数</th>
		<th>生日</th>
		<th>操作</th>
	</tr>
	<tr>
		<td><input type="checkbox" name="del"></td>
		<td>1班</td>
		<td>路飞</td>
		<td>100</td>
		<td>2018-09-10</td>
		<td>
			<a href="javascript:;" οnclick="del(this)">删除</a><a href="javascript:;" οnclick="change(this)">修改</a>
		</td>
	</tr>
	<tr>
		<td><input type="checkbox" name="del"></td>
		<td>2班</td>
		<td>索隆</td>
		<td>90</td>
		<td>2017-01-18</td>
		<td>
			<a href="javascript:;" οnclick="del(this)">删除</a><a href="javascript:;" οnclick="change(this)">修改</a>
		</td>
	</tr>
	<tr>
		<td><input type="checkbox" name="del"></td>
		<td>3班</td>
		<td>娜美</td>
		<td>98</td>
		<td>2016-07-01</td>
		<td>
			<a href="javascript:;" οnclick="del(this)">删除</a><a href="javascript:;" οnclick="change(this)">修改</a>
		</td>
	</tr>
</table>
<form>
	班级：<input type="number" id="grade" name=""><br>
	姓名：<input id="name" type="text" name="name" value=""><br>
	分数：<input id="math" type="number" name=""><br>
	生日：<input id="bir" type="date" name=""><br>
	<button type="button" οnclick="sub()">提交</button>
</form>
<div class="changeArea">
	<div class="mainArea">
		<button class="closeArea" οnclick="closeArea()">x</button>	
		班级：<input type="number" id="grade1" name=""><br>
		姓名：<input id="name1" type="text" name="name" value=""><br>
		分数：<input id="math1" type="number" name=""><br>
		生日：<input id="bir1" type="date" name=""><br>
		<button type="button" οnclick="update()">更新</button>	
	</div>
</div>
<script type="text/javascript">
	// 全选全不选
	function checkAll(me){
		var checkBoxs = document.getElementsByName("del");
		var status = me.checked;
		for (var i = 0; i < checkBoxs.length; i++) {
			checkBoxs[i].checked = status;
		}
	}
	// 多个删除
	function delAll(){
		var delAll = document.getElementsByName("del");
		var delTr,delTb;
		for (var i = delAll.length-1; i >= 0 ; i--) {
			// console.log(delAll)
			if(delAll[i].checked == true){
				delTr = delAll[i].parentNode.parentNode;
				// console.log(delTr)
				delTb = delTr.parentNode;
				delTb.removeChild(delTr);
				// i--;
				// alert(delAll.length)
			}	
		}
		document.getElementsByName("delAll")[0].checked = false;
	}
	// 单个删除
	function del(me){
		var delTr = me.parentNode.parentNode;
		var delTb = delTr.parentNode;
		delTb.removeChild(delTr);
	}
	// 表单提交添加
	function sub(){
		var grade = document.getElementById("grade").value;//班级
		var name = document.getElementById('name').value;//姓名
		var math = document.getElementById("math").value;//分数
		var bir = document.getElementById("bir").value;//生日
		var addTr = document.createElement("tr");//添加行
		// 多选框
		var addTd1 = document.createElement("td"); //添加单元格
		var addInput = document.createElement("input"); //添加删除多选框
		addInput.setAttribute("type","checkbox");//添加属性type
		addInput.setAttribute("name","del");//添加属性name
		addTd1.appendChild(addInput);
		//班级
		var addTd2 = document.createElement("td"); //添加单元格
		addTd2.innerHTML = grade + "班";
		//姓名
		var addTd3 = document.createElement("td"); //添加单元格
		addTd3.innerHTML = name;
		//分数
		var addTd4 = document.createElement("td"); //添加单元格
		addTd4.innerHTML = math;
		//生日
		var addTd5 = document.createElement("td"); //添加单元格
		addTd5.innerHTML = bir;
		//删除
		var addTd6 = document.createElement("td"); //添加单元格
		var addBt1 = document.createElement("a"); //添加删除按钮链接
		addBt1.setAttribute("href","javascript:;");
		addBt1.setAttribute("onclick","del(this)");
		// addBt1.setAttribute("style","margin:0 4px");
		addBt1.innerHTML = "删除";
		addTd6.appendChild(addBt1);
		var addBt2 = document.createElement("a"); //添加修改按钮链接
		addBt2.setAttribute("href","javascript:;");
		addBt2.setAttribute("onclick","change(this)");
		addBt2.innerHTML = "修改";
		addTd6.appendChild(addBt2);
		//整行添加
		addTr.appendChild(addTd1);
		addTr.appendChild(addTd2);
		addTr.appendChild(addTd3);
		addTr.appendChild(addTd4);
		addTr.appendChild(addTd5);
		addTr.appendChild(addTd6);
		var tableArea = document.getElementById("tableArea");
		tableArea.appendChild(addTr);
		// 清空表单
		var formInfo = document.getElementsByTagName("form")[0];
		formInfo.reset();
	}
	//修改
	var checkTr;
	function change(me){
		var changeArea = document.getElementsByClassName("changeArea")[0];
		changeArea.style.display = "block";
		//数据填充
		checkTr = me.parentNode.parentNode;
		var grade1 = document.getElementById("grade1");
		var name1 = document.getElementById("name1");
		var math1 = document.getElementById("math1");
		var bir1 = document.getElementById("bir1");
		grade1.value = parseInt(checkTr.children[1].innerHTML);
		name1.value = checkTr.children[2].innerHTML;
		math1.value = checkTr.children[3].innerHTML;
		bir1.value = checkTr.children[4].innerHTML;
	}
	//关闭弹框
	function closeArea(){
		// alert(9)
		var changeArea = document.getElementsByClassName("changeArea")[0];
		changeArea.style.display = "none";
	}
	//提交更新
	function update(){
		var grade1 = document.getElementById("grade1");
		var name1 = document.getElementById("name1");
		var math1 = document.getElementById("math1");
		var bir1 = document.getElementById("bir1");
		checkTr.children[1].innerHTML = grade1.value;
		checkTr.children[2].innerHTML = name1.value;
		checkTr.children[3].innerHTML = math1.value;
		checkTr.children[4].innerHTML = bir1.value;
		closeArea();
	}
</script>
</body>
</html>

先总结到这里，如有误解敬请指正。

骆小胖

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
纯JS代码完成表格增删改查

多，这里大概列举几个常见的（1）获取表单值写到了点击事件外部，导致点击按钮时获取不到表单输入值解析：如果写到了外部，name获取到的会是初始化页面时的表单值--→即空。所以必须写到点击事件内部才能获取点击时的当前表单值。（2）实现全选全不选var checkBoxs = document.getElementsByName("del");var status = me.checked;for (var i = 0; i &lt
复制链接

扫一扫