效果图在最下面哦
<!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">
<title>Document</title>
</head>
<style>
.box {
width: 400px;
height: 400px;
border: 5px solid pink;
}
#messageTable {
position: absolute;
top: 0;
left: 40%;
width: 500px;
margin: 0 auto;
}
/* tr th{
width: 300px;
} */
p {
font-size: 30px;
transform: translateX(20px);
}
.inp {
width: 250px;
height: 40px;
outline: none;
border-radius: 5px;
font-size: 30px;
}
#btn {
background-color: lightseagreen;
border-radius: 5px;
width: 100px;
height: 30px;
transform: translateX(150px);
}
td {
text-align: center;
}
#box2{
position: absolute;
left: 75%;
top: 0;
}
</style>
<body>
<form class="box" action="">
<p>姓名:<input type="text" class="inp"></p>
<p>年龄:<input type="text" class="inp"></p>
<p>性别:<input type="text" class="inp"></p>
<p>学号:<input type="text" class="inp"></p>
<input type="button" id="btn" value="提交"></input>
</form>
<table id="messageTable" border="" cellspacing="" cellpadding="">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>学号</th>
<th>操作</th>
</tr>
</table>
<div id="box2">
<input id="input2" type="text"><button id="btn2">搜索</button>
</div>
<script>
var inps = document.getElementsByClassName('inp');
var btn = document.getElementById('btn');
var table = document.getElementById('messageTable');
//创建一个表量储存序号
// var num = 1;
//创建新数组
var sz = [];
var arr = [];
var obj = true;
btn.onclick = function () {
if (!obj) {
console.log("编辑");
//将获取到的值存入对象中
var str = {
name: inps[0].value,
age: inps[1].value,
sex: inps[2].value,
stuid: inps[3].value
}
//input非空验证
for (var i = 0; i < inps.length; i++) {
if (inps[i].value.trim() == "" || inps[i].value.trim() == null || inps[i].value.trim() == undefined) {
alert("请输入完整的信息")
return false;
}
}
for (var i = 0; i < arr.length; i++) {
if (arr[i].stuid == str.stuid) {
arr.splice(i, 1, str);
}
}
var trs = document.querySelectorAll("tr");
for (var i = 1; i < trs.length; i++) {
if (str.stuid == trs[i].children[4].children[0].value) {
trs[i].children[1].innerHTML = str.name;
trs[i].children[2].innerHTML = str.age;
trs[i].children[3].innerHTML = str.sex;
trs[i].children[4].innerHTML = str.stuid;
var edits = trs[i].querySelector(".edits");
var saves = trs[i].querySelector(".saves");
saves.style.display = "none";
edits.style.display = "block";
}
}
delNull();
} else {
var str = {
name: inps[0].value,
age: inps[1].value,
sex: inps[2].value,
stuid: inps[3].value
}
for (var i = 0; i < inps.length; i++) {
if (inps[i].value.trim() == "" || inps[i].value.trim() == null || inps[i].value.trim() == undefined) {
alert("请输入完整的信息")
return false;
}
}
//将用户输入的学号与新数组中储存的学号对比如果存在则删除反之存入新数组
if (arr.length > 0) {
for (var i = 0; i < arr.length; i++) {
if (arr[i].stuid == str.stuid) {
alert("学号重复,请重新输入")
return false;
}
}
arr.push(str)
} else {
arr.push(str)
}
//创建tr标签
var trs = document.createElement("tr");
//将tr标签添加到表格中
table.appendChild(trs);
//创建存储序号的单元格
var a = document.createElement("td");
a.innerHTML = arr.length;
//将存储序号的单元格添加到tr中
trs.appendChild(a);
//获取用户输入的值并将其添加到表格中
for (var i = 0; i < inps.length; i++) {
var tds = document.createElement("td");
trs.appendChild(tds);
tds.innerHTML = inps[i].value;
}
var del = document.createElement('td');
del.innerHTML = "<button οnclick='dels(this)'>删除</button>";
trs.appendChild(del);
var bj = document.createElement("td");
bj.innerHTML = "<button class='edits' οnclick='edits(this)'>编辑</button><button class='saves' style='display: none;' οnclick='save(this)'>保存</button>"
trs.appendChild(bj);
delNull();
}
}
//序号修改
function updateview() {
var trs = document.querySelectorAll("tr");
for (var i = 1; i < trs.length; i++) {
trs[i].children[0].innerHTML = i;
}
}
function dels(e) {
var fuIndex = e.parentNode.parentNode;
// console.log(fuIndex);
fuIndex.remove();
for (var i = 0; i < arr.length; i++) {
if (arr[i].stuid == fuIndex.children[4].innerHTML) {
arr.splice(i, 1);
}
}
updateview();
}
//编辑
function edits(e) {
var bjtr = e.parentNode.parentNode;
for (var i = 1; i < 5; i++) {
var inputs = document.createElement('input');
inputs.setAttribute("type", "text");
if (i == 4) {
inputs.setAttribute("disabled", "true")
}
inputs.style.width = "40%";
inputs.value = bjtr.children[i].innerHTML;
console.log(inputs.value);
var tds = bjtr.children[i];
bjtr.children[i] = "";
tds.appendChild(inputs)
var edits = bjtr.querySelector(".edits");
edits.style.display = "none";
var saves = bjtr.querySelector(".saves");
saves.style.display = "block";
}
var inps = document.getElementsByClassName('inp');
for (var i = 0; i < inps.length; i++) {
inps[i].value = bjtr.children[i + 1].children[0].value;
inps[3].setAttribute("disabled", "true")
}
obj = false;
}
// 保存
function save(e) {
var bjtr = e.parentNode.parentNode;
var input = bjtr.querySelectorAll("input");
for (var i = 1; i <= input.length; i++) {
bjtr.children[i].innerHTML = input[i - 1].value;
input[i - 1].remove();
}
for (var i = 0; i < arr.length; i++) {
if (arr[i].id == input[3].value) {
arr[i].name = input[0].value;
arr[i].age = input[1].value;
arr[i].sex = input[2].value;
arr[i].id = input[3].value;
}
}
console.log(arr);
var edits = bjtr.querySelector(".edits");
edits.style.display = "none";
var saves = bjtr.querySelector(".saves");
saves.style.display = "none";
edits.style.display = "block";
delNull();
}
// 清空
function delNull() {
var inps = document.getElementsByClassName('inp');
for (var i = 0; i < inps.length; i++) {
inps[i].value = "";
inps[i].removeAttribute("disabled");
}
}
//搜索
var input2 = document.getElementById('input2');
var btn2 = document.getElementById('btn2');
btn2.onclick = function () {
var k = []
var val = input2.value; //获取搜索框的值
for (let i = 0; i < arr.length; i++) { //根据关键字查找
if (arr[i].name.search(val) != -1 || arr[i].age.search(val) != -1 || arr[i].sex.search(val) != -1 || arr[i].stuid.search(
val) != -1) {
var dx = {
name: arr[i].name,
age: arr[i].age,
sex: arr[i].sex,
stuid: arr[i].stuid
}
k.push(dx)
}
}
console.log(k);
var s =
'<tr><th>序号</th><th>姓名</th><th>年龄</th><th>性别</th><th>学号</th><th colspan="2">操作</th></tr>'
for (let i = 0; i < k.length; i++) {
s += '<tr><td>' + (i + 1) + '</td><td>' + k[i].name + '</td><td>' + k[i].age + '</td><td>' + k[i].sex +
'</td><td>' + k[i].stuid + '</td><td><button type="button"' + i +
'" οnclick="dels(this)">删除</button></td><td><button type="button"' + i +
'" οnclick="edits(this)">编辑</button></td></tr>'
}
table.innerHTML = s
input2.value = ''
}
</script>
</body>
</html>
