博主在学习原生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 !=
null && inputs[
2].value != '' && inputs[2].value != null && inputs[3].value != '' && inputs[3].value != null) {
// 将输入的数据存入数组
message = {
"number": number,
"name": inputs[0].value,
"age": inputs[1].value,
'sex': inputs[2].value,
'id': inputs[3].value
};
// 调用去重函数
clearMess();
// 启用自动数据重置
reset.click();
} else {
// 空数据提示
alert("数据输入不完全，请重新输入数据");
};
});
//TODO 去重函数
function clearMess() {
if (students.length > 0) {
for (var i = 0; i < students.length; i++) {
if (students[i].id == message.id) {
alert("键值重复，请重新输入");
return false;
};
};
students.push(message);
} else {
students.push(message);
};
// 调用回显函数
innerMess();
};
// TODO 回显函数
function innerMess() {
// 生成表格内容区域
if (flag) {
// 创建新的tr节点
var trs = document.createElement('tr');
tbody.appendChild(trs);
// 每次创建一个tr，number+1
number++;
// 创建一个td，接收number值，赋予序号的含义
var tdNum = document.createElement('td');
tdNum.classList.add('nums');
tdNum.innerHTML = number;
trs.appendChild(tdNum);
// 将输入框的值赋予到新创建的td
for (var i = 0; i < inputs.length; i++) {
var tds = document.createElement('td');
tds.innerHTML = inputs[i].value;
trs.appendChild(tds);
};
// 创建移除操作按钮 - 删除
var deleteBtn = document.createElement('td');
deleteBtn.innerHTML = `<button class="delete" οnclick='deleteMess(this)'>删除</button>`;
trs.appendChild(deleteBtn);
// 创建修改操作按钮 - 修改
var changeBtn = document.createElement('td');
changeBtn.innerHTML = `<button class="change" οnclick='changeMess(this)'>修改</button>`;
trs.appendChild(changeBtn);
// 创建数据移动按钮 - 移动
var doingBtn = document.createElement('td');
doingBtn.innerHTML = `<span οnclick="upMess(this)">↑</span>
<span οnclick="downMess(this)">↓</span>`;
trs.appendChild(doingBtn);
};
};
添加功能的主要作用区域就在回显函数部分。
删除功能
点击每个表格行的删除按钮，删除当前行，兄弟行自动调整序号，并且可以再次添加被删除数据的相同学号的数据。
// 仅为部分切片 完整代码请看文末
//TODO 删除函数
function deleteMess(element) {
// 获取到当前标签的序号
var deleteIndex = element.parentNode.parentNode;
if (confirm("是否确认操作")) {
// 先删除标签
deleteIndex.remove();
// 再根据序号删除数组中的对应数据
for (var i = 0; i < students.length; i++) {
if (students[i].id == deleteIndex.children[4].innerHTML) {
students.splice(i, 1);
}
};
alert('操作成功');
var nums = document.querySelectorAll('.nums');
// 删除行的同时，控制删除行以外行数序号的删减
var index;
if (nums.length > 0) {
for (var i = 0; i < nums.length; i++) {
index = i;
var nums = document.querySelectorAll('.nums');
nums[index].innerHTML = index + 1;
};
};
console.log(students);
number--;
};
};
修改功能
点击当前行的修改按钮，表格显示数据的单元格标签变为输入框，可以修改当前行除学号以外的数据；并且修改按钮变为更新按钮，点击后可将数据更新。
// 仅为部分切片 完整代码请看文末
//TODO 修改函数
function changeMess(element) {
var tds2 = element.parentNode.parentNode.children;
for (var i = 1; i < tds2.length - 3; i++) {
inputs[i - 1].value = tds2[i].innerHTML;
inputs[3].setAttribute('disabled', 'true');
tds2[i].innerHTML = `<input type="text" value='${tds2[i].innerText}'/>`;
};
tds2[4].children[0].setAttribute('disabled', 'true');
element.parentNode.innerHTML = `<button class="change" οnclick='updateMess(this)'>更新</button>`;
};
//TODO 更新函数
function updateMess(element) {
var tdsInp = document.querySelectorAll('table input');
var firstNumber = parseInt(element.parentNode.parentNode.firstElementChild.innerHTML);
var tds3 = element.parentNode.parentNode.children;
students.splice(firstNumber - 1, 1);
for (var i = 0; i < students.length; i++) {
if (students[i].id == tdsInp[3].value) {
alert("键值重复，请重新输入");
return false;
};
};
var message2 = {
"number": firstNumber - 1,
"name": tdsInp[0].value,
"age": tdsInp[1].value,
"sex": tdsInp[2].value,
"id": tdsInp[3].value
};
students.push(message2);
for (var i = 0; i < tdsInp.length; i++) {
tds3[i + 1].innerHTML = tdsInp[i].value;
};
inputs[3].removeAttribute('disabled');
reset.click();
element.parentNode.innerHTML = `<button class="change" οnclick='changeMess(this)'>修改</button>`;
};
这里的bug就是，如果在修改数据的时候点击了删除按钮，被禁用的表单输入框不会恢复原状；还有就是通过表单更新的数据不会返还到当前行，由于学号重复的原因，也不能添加进去。
数据查询功能
在表格存在多行数据的时候，可以使用左侧的搜索区域。输入对应数据的内容，会隐藏其它行的数据；清空内容再次点击，重新展现所有数据。使用的查询标准是，任意一栏数据与输入内容相同，都会被查询到。
// 仅为部分切片 完整代码请看文末
//TODO 查询函数
function searchMess(element) {
var messageLens = document.querySelectorAll('tbody tr');
var searchIpt = document.querySelector('.searchInp').value;
for (var i = 0; i < messageLens.length; i++) {
if (searchIpt == '' || searchIpt == null || searchIpt == undefined) {
messageLens[i].style.display = '';
} else {
messageLens[i].style.display = 'none';
for (var j = 1; j < messageLens[i].children.length - 3; j++) {
if (searchIpt == messageLens[i].children[j].innerHTML) {
messageLens[i].style.display = '';
};
};
};
};
};
数据位置移动功能
点击最后一栏的上下移动按钮，可以改变每行数据的位置，前提是以当前位置为基准，存在下一行或上一行。改变的只有数据的位置，序号不变。
// 仅为部分切片 完整代码请看文末
// TODO 数据位置向上移动函数
function upMess(element) {
var trsUp = document.querySelectorAll('tbody tr');
if (element.parentNode.parentNode.children[0].innerHTML == 1) {
alert("移动失败，数据无法再向上移动");
} else {
for (var i = 1; i <= 4; i++) {
var temps = element.parentNode.parentNode.children[i].innerHTML;
element.parentNode.parentNode.children[i].innerHTML = element.parentNode.parentNode.previousElementSibling
.children[i].innerHTML;
element.parentNode.parentNode.previousElementSibling.children[i].innerHTML = temps;
};
};
};
// TODO 数据位置向下移动函数
function downMess(element) {
if (element.parentNode.parentNode.children[0].innerHTML == students.length) {
alert("移动失败，数据无法再向下移动");
} else {
for (var i = 1; i <= 4; i++) {
var temps2 = element.parentNode.parentNode.children[i].innerHTML;
element.parentNode.parentNode.children[i].innerHTML = element.parentNode.parentNode.nextElementSibling
.children[i].innerHTML;
element.parentNode.parentNode.nextElementSibling.children[i].innerHTML = temps2;
};
};
};
到此，所有的功能都已经演示完毕，完整代码展示如下，稍后我也会将其上传到资源中去，有需要的小伙伴可以自行下载。
完整代码
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/表格.css" />
<title>万物之恋制作</title>
</head>
<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>
<script src="js/表格.js"></script>
</html>
/* CSDN万物之恋制作 */
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;
}
/* CSDN万物之恋制作 */
js部分
//TODO 1.获取元素
// 获取存放数据位置的tbody标签
var tbody = document.querySelector('tbody');
// 获取输入数据区域的input的标签
var inputs = document.querySelectorAll('.container-left input');
// 获取触发添加功能的button按钮
var btn = document.querySelector('.btn');
// 获取触发清空表单的button按钮
var reset = document.querySelector('button[type=reset');
// 获取检索区域的搜索button按钮
var searchBtn = document.querySelector(".searchBtn");
// 设定序号初始值
var number = 0;
// 判断记录值
var flag = true;
// 定义空对象，存放输入数据
var message = {};
// 定义空数组，存放对象
var students = [];
// TODO 2.添加功能
btn.addEventListener('click', function () {
// 输入框非空判断
if (inputs[0].value != '' && inputs[0].value != null && inputs[1].value != '' && inputs[1].value !=
null && inputs[
2].value != '' && inputs[2].value != null && inputs[3].value != '' && inputs[3].value != null) {
// 将输入的数据存入数组
message = {
"number": number,
"name": inputs[0].value,
"age": inputs[1].value,
'sex': inputs[2].value,
'id': inputs[3].value
};
// 调用去重函数
clearMess();
// 启用自动数据重置
reset.click();
} else {
// 空数据提示
alert("数据输入不完全，请重新输入数据");
};
});
//TODO 去重函数
function clearMess() {
if (students.length > 0) {
for (var i = 0; i < students.length; i++) {
if (students[i].id == message.id) {
alert("键值重复，请重新输入");
return false;
};
};
students.push(message);
} else {
students.push(message);
};
// 调用回显函数
innerMess();
};
// TODO 回显函数
function innerMess() {
// 生成表格内容区域
if (flag) {
// 创建新的tr节点
var trs = document.createElement('tr');
tbody.appendChild(trs);
// 每次创建一个tr，number+1
number++;
// 创建一个td，接收number值，赋予序号的含义
var tdNum = document.createElement('td');
tdNum.classList.add('nums');
tdNum.innerHTML = number;
trs.appendChild(tdNum);
// 将输入框的值赋予到新创建的td
for (var i = 0; i < inputs.length; i++) {
var tds = document.createElement('td');
tds.innerHTML = inputs[i].value;
trs.appendChild(tds);
};
// 创建移除操作按钮 - 删除
var deleteBtn = document.createElement('td');
deleteBtn.innerHTML = `<button class="delete" οnclick='deleteMess(this)'>删除</button>`;
trs.appendChild(deleteBtn);
// 创建修改操作按钮 - 修改
var changeBtn = document.createElement('td');
changeBtn.innerHTML = `<button class="change" οnclick='changeMess(this)'>修改</button>`;
trs.appendChild(changeBtn);
// 创建数据移动按钮 - 移动
var doingBtn = document.createElement('td');
doingBtn.innerHTML = `<span οnclick="upMess(this)">↑</span>
<span οnclick="downMess(this)">↓</span>`;
trs.appendChild(doingBtn);
};
};
//TODO 删除函数
function deleteMess(element) {
// 获取到当前标签的序号
var deleteIndex = element.parentNode.parentNode;
if (confirm("是否确认操作")) {
// 先删除标签
deleteIndex.remove();
// 再根据序号删除数组中的对应数据
for (var i = 0; i < students.length; i++) {
if (students[i].id == deleteIndex.children[4].innerHTML) {
students.splice(i, 1);
}
};
alert('操作成功');
var nums = document.querySelectorAll('.nums');
// 删除行的同时，控制删除行以外行数序号的删减
var index;
if (nums.length > 0) {
for (var i = 0; i < nums.length; i++) {
index = i;
var nums = document.querySelectorAll('.nums');
nums[index].innerHTML = index + 1;
};
};
console.log(students);
number--;
};
};
//TODO 修改函数
function changeMess(element) {
var tds2 = element.parentNode.parentNode.children;
for (var i = 1; i < tds2.length - 3; i++) {
inputs[i - 1].value = tds2[i].innerHTML;
inputs[3].setAttribute('disabled', 'true');
tds2[i].innerHTML = `<input type="text" value='${tds2[i].innerText}'/>`;
};
tds2[4].children[0].setAttribute('disabled', 'true');
element.parentNode.innerHTML = `<button class="change" οnclick='updateMess(this)'>更新</button>`;
};
//TODO 更新函数
function updateMess(element) {
var tdsInp = document.querySelectorAll('table input');
var firstNumber = parseInt(element.parentNode.parentNode.firstElementChild.innerHTML);
var tds3 = element.parentNode.parentNode.children;
students.splice(firstNumber - 1, 1);
for (var i = 0; i < students.length; i++) {
if (students[i].id == tdsInp[3].value) {
alert("键值重复，请重新输入");
return false;
};
};
var message2 = {
"number": firstNumber - 1,
"name": tdsInp[0].value,
"age": tdsInp[1].value,
"sex": tdsInp[2].value,
"id": tdsInp[3].value
};
students.push(message2);
for (var i = 0; i < tdsInp.length; i++) {
tds3[i + 1].innerHTML = tdsInp[i].value;
};
inputs[3].removeAttribute('disabled');
reset.click();
element.parentNode.innerHTML = `<button class="change" οnclick='changeMess(this)'>修改</button>`;
};
//TODO 查询函数
function searchMess(element) {
var messageLens = document.querySelectorAll('tbody tr');
var searchIpt = document.querySelector('.searchInp').value;
for (var i = 0; i < messageLens.length; i++) {
if (searchIpt == '' || searchIpt == null || searchIpt == undefined) {
messageLens[i].style.display = '';
} else {
messageLens[i].style.display = 'none';
for (var j = 1; j < messageLens[i].children.length - 3; j++) {
if (searchIpt == messageLens[i].children[j].innerHTML) {
messageLens[i].style.display = '';
};
};
};
};
};
// TODO 数据位置向上移动函数
function upMess(element) {
var trsUp = document.querySelectorAll('tbody tr');
if (element.parentNode.parentNode.children[0].innerHTML == 1) {
alert("移动失败，数据无法再向上移动");
} else {
for (var i = 1; i <= 4; i++) {
var temps = element.parentNode.parentNode.children[i].innerHTML;
element.parentNode.parentNode.children[i].innerHTML = element.parentNode.parentNode.previousElementSibling
.children[i].innerHTML;
element.parentNode.parentNode.previousElementSibling.children[i].innerHTML = temps;
};
};
};
// TODO 数据位置向下移动函数
function downMess(element) {
if (element.parentNode.parentNode.children[0].innerHTML == students.length) {
alert("移动失败，数据无法再向下移动");
} else {
for (var i = 1; i <= 4; i++) {
var temps2 = element.parentNode.parentNode.children[i].innerHTML;
element.parentNode.parentNode.children[i].innerHTML = element.parentNode.parentNode.nextElementSibling
.children[i].innerHTML;
element.parentNode.parentNode.nextElementSibling.children[i].innerHTML = temps2;
};
};
};
（第一次写这么长的文章，还是很充实的）
这里是万物之恋，我们下次再见了！
284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
