原生js制作并实现数据表增删改查功能~来自1024

博主在学习原生js的时候制作的demo，内含大量的节点操作和数组，对象，函数的逻辑，当时的制作时光对我而言也是痛并快乐着。
基本上实现了一张数据表应有的功能：增删改查及位置移动。但实际上由于当时的技术不够成熟，可能仍存在着许多bug，分享既是为了分享技术经验，也是为了和大家一起研究改进。
话不多说，这就来看看吧！

表格功能预览

总体样式预览
各项功能预览
完整代码

总体样式预览

body标签部分

<body>
	<h2 align="center">点击添加学生信息</h2>
	<div class="container">
		<div class="search">
			<p>信息检索</p>
			<p>
				<input type="text" class="searchInp">
				<button type="button" 
				class="searchBtn"onclick="searchMess(this)">
					搜索
				</button>
			</p>
		</div>
		<div class="container-left">
			<p>信息输入</p>
			<form action="#" method="GET">
				姓名：
				<input type="text" name="user" id="user" />
				年龄：
				<input type="number" name="age" id="age" />
				性别：
				<input type="text" name="sex" id="sex" />
				学号：
				<input type="text" name="id" id="id" />
				<button type="button" class="btn">添加</button>
				<button type="reset">重置</button>
			</form>

		</div>
		<div class="container-right">
			<p>信息显示</p>
			<table cellpadding="0" cellspacing="0">
				<thead>
					<td>序号</td>
					<td>姓名</td>
					<td>年龄</td>
					<td>性别</td>
					<td>学号</td>
					<td>移除</td>
					<td>修改</td>
					<td>移动</td>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
	</div>

</body>

css演示部分

* {
   
   
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
   
   
	display: grid;
	align-items: center;
	justify-content: center;
}

.container {
   
   
	width: 1100px;
	height: 350px;
	margin-top: 20px;
	display: flex;
	overflow: hidden;
}

.container-left {
   
   
	width: 300px;
	padding: 10px 15px;
	background: rgb(216, 195, 157);
}

.container-left input {
   
   
	width: 80%;
	min-height: 30px;
	outline: none;
	font-size: 16px;
	margin-top: 10px;
	margin-bottom: 15px;
	border-radius: 5px;
	padding: 0 5px;
	border: 1px solid rgb(69, 126, 123);
}

.container-left button {
   
   
	border-radius: 5px;
	font-size: 16px;
	padding: 10px 25px;
	margin: 10px 20px;
	cursor: pointer;
}

.container-right {
   
   
	width: 600px;
	padding: 10px 15px;
	overflow-y: auto;
	background: rgb(160, 240, 178);

}

.container-right table {
   
   
	cursor: default;
	border: 1px solid #000;
}

.container-right table {
   
   
	width: 500px;
	text-align: center;
	margin: 20px 10px;
}

.container-right table thead td {
   
   
	color: #fff !important;
	background: rgb(73, 187, 58);
}

.container-right table tr td {
   
   
	height: 35px;
	font-size: 18px;
	color: #000;
	border: 1px solid #000;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container-right table tr td button {
   
   
	padding: 3px 7px;
	cursor: pointer;
}

.container-right table tr td input {
   
   
	width: 50px;
	text-align: center;
}

.delete {
   
   
	color: #fff;
	background-color: #f00;
}

.change {
   
   
	background-color: #0f0;
}

.container-right table tr td span {
   
   
	cursor: pointer;
	text-align: center;
	display: inline-block;
	width: 24px;
	height: 24px;
	border-radius: 5px;
	background-color: antiquewhite;
}

.container-right table tr td span:hover {
   
   
	color: #fff;
	background-color: rgb(172, 163, 152);
}

.search {
   
   
	width: 200px;
	font-size: 16px;
	text-align: center;
	padding: 10px 5px;
	background-color: rgb(207, 183, 226);
}

.search input {
   
   
	width: 130px;
	height: 30px;
	background-color: snow;
	border: 1px solid rgb(80, 80, 80);
	outline: none;
}

整体预览

添加数据后

添加数据前

添加数据前
由于当时在制作时以js部分的功能实现为主，所以没有太多的在样式上下功夫，有需要的小伙伴可以自己在修改。

各项功能预览

添加功能

数据表初始不存在数据，在表单中输入数据后，在表格区域显示，并附带有其它功能的操作按钮；且数据中，学号相同的数据不允许二次添加。
添加功能预览

// 仅为部分切片 完整代码请看文末

// 添加功能
btn.addEventListener('click', function () {
   
   
	// 输入框非空判断
	if (inputs[0].value != '' && inputs[0].value != null && inputs[1].value != '' && inputs[1].value !=