之前学习的时候做了一个简单的crud，下面是效果图

html内容如下

<div class="conter"><div><button id="btnAdd">添加</button><button id="delAll" onclick="delAll()"> 全部删除</button></div><table border="1" cellpadding="0" cellspacing="0"><thead><tr><th>学号</th><th>姓名</th><th>年龄</th><th>班级</th><th>操作</th></tr></thead><tbody id="tbStudent"></tbody></table><div id="divAddStudent" class="hidden"><h2>学生信息</h2><form action="#" id="addStudentForm"><p>学号：<input type="text" name="stuNo" id="stuNo"> </p><p>姓名：<input type="text" name="tuName" id="stuName"> </p><p>年龄：<input type="text" name="stuAge" id="stuAge"> </p><p>班级：<input type="text" name="stuClass" id="stuClass"> </p><p><button id="btnAddData" type="button">添加</button><buttonid="btnCancel">取消</button></p></form></div></div><div id="zhezhao"class="hidden"></div>

css内容

*{margin: 0;padding: 0;}table{width: 100%;}table th ,table td{height: 30px;line-height: 30px;}table tbody tr:nth-child(2n){background-color: gainsboro;}table td{text-align: center;}.conter{width: 960px;margin: 30px auto;}button{padding: 5px 10px;margin: 5px;background-color: #00A398;color: white;border: none;border-radius: 15%;cursor: pointer;}#divAddStudent{position: absolute;z-index: 1;top: 0;bottom: 0;right: 0;left: 0;width: 500px;height: 300px;margin: auto;background-color: white;box-sizing: border-box;padding: 20px 50px;}#divAddStudent h2{margin-bottom: 30px;}#divAddStudent p{margin-top: 10px;}#zhezhao{position: absolute;top: 0;bottom: 0;right: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.4);}.hidden{display: none;}.show{display: block;}tbody:empty:before{content:"当前没有学生，快去添加吧"}

js内容

// 学生数据 stuNo：编号（唯一）stuName：姓名，stuAge：年龄，stuClass：班级名称var studentArr=[ {"stuNo":"001","stuName":"红","stuAge":16,"stuClass":"218"},{"stuNo":"002","stuName":"小米","stuAge":15,"stuClass":"219"},{"stuNo":"003","stuName":"小明","stuAge":15,"stuClass":"218"},{"stuNo":"004","stuName":"小蓝","stuAge":16,"stuClass":"218"},{"stuNo":"005","stuName":"小紫","stuAge":15,"stuClass":"219"},{"stuNo":"006","stuName":"小青","stuAge":15,"stuClass":"218"},{"stuNo":"007","stuName":"小白","stuAge":16,"stuClass":"218"},{"stuNo":"008","stuName":"小黄","stuAge":15,"stuClass":"219"},{"stuNo":"009","stuName":"小黑","stuAge":15,"stuClass":"218"}];var stuNoOper="";dataStudent();$("btnAdd").onclick=AddStudent;$("zhezhao").onclick=function () {model("divAddStudent","hidden");};$("btnCancel").onclick=function () {model("divAddStudent","hidden");};$("btnAddData").onclick=addStudentData;//添加学生function addStudentData() {var stuNo =$("stuNo").value;var stuName =$("stuName").value;var stuAge =$("stuAge").value;var stuClass =$("stuClass").value;if(stuNo==""){alert("学号不能为空");return;}else if (stuName==""){alert("姓名不能为空");return;}else if (stuAge==""){alert("年龄不能为空");return;}else if (stuClass==""){alert("班级不能为空");return;}if (stuNoOper==""){if (checkStudentNo(stuNo)){alert("当前学号已经存在");return;}varobj= {"stuNo":stuNo,"stuName":stuName,"stuAge":stuAge,"stuClass":stuClass};studentArr.push(obj);if (confirm("添加成功，是否继续添加")){$("stuNo").value="";$("stuName").value="";$("stuAge").value="";$("stuClass").value="";dataStudent();}else {model("divAddStudent","hidden");dataStudent();}}else {for(var i=0;i<studentArr.length;i++){if (studentArr[i].stuNo==stuNoOper){studentArr[i].stuName=stuName;studentArr[i].stuAge=stuAge;studentArr[i].stuClass=stuClass;alert("修改成功");model("divAddStudent","hidden");dataStudent();break;}}}}//模态框方法function model(id,type) {type=type || "show";$("zhezhao").className=type;$(id).className=type;}//修改学生functionupdate(stuno) {console.log(123)var stuObj=getStudentBystuNO(stuno);if(stuObj){stuNoOper=stuno;model("divAddStudent");$("stuNo").value=stuObj.stuNo;$("stuName").value=stuObj.stuName;$("stuAge").value=stuObj.stuAge;$("stuClass").value=stuObj.stuClass;}else {alert("输入有误")}}//获取修改学生信息function getStudentBystuNO(stuno) {for(var i=0;i<studentArr.length;i++){if(studentArr[i].stuNo==stuno){return studentArr[i];}}return null;}//添加，接收用户数据function AddStudent() {stuNoOper="";model("divAddStudent");}//数据显示function dataStudent() {var tbstudent=$("tbStudent");tbstudent.innerHTML="";for(var i=0; i<studentArr.length;i++){tbstudent.innerHTML+=`<tr><td>${studentArr[i].stuNo}</td><td>${studentArr[i].stuName}</td><td>${studentArr[i].stuAge}</td><td>${studentArr[i].stuClass}</td> <td><button onclick = 'del(${studentArr[i].stuNo})'>删除</button><button onclick = 'update(${studentArr[i].stuNo})'>修改</button></td></tr>`}}//删除function del(stuno) {if (confirm("确定要删除吗")){for (var i=0;i<studentArr.length;i++){if(studentArr[i].stuNo==stuno){studentArr.splice(i,1);alert("删除成功");dataStudent();break;}}}}//删除全部function delAll() {if (confirm("确定要删除吗")){studentArr=[];dataStudent();}}//验证学号function checkStudentNo(stuNo) {for( var i=0;i<studentArr.length;i++){if(studentArr[i].stuNo==stuNo){return true;}}return false;}//选择idfunction $(id) {return document.getElementById(id);}

完整代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style type="text/css">*{margin: 0;padding: 0;}table{width: 100%;}table th ,table td{height: 30px;line-height: 30px;}table tbody tr:nth-child(2n){background-color: gainsboro;}table td{text-align: center;}.conter{width: 960px;margin: 30px auto;}button{padding: 5px 10px;margin: 5px;background-color: #00A398;color: white;border: none;border-radius: 15%;cursor: pointer;}#divAddStudent{position: absolute;z-index: 1;top: 0;bottom: 0;right: 0;left: 0;width: 500px;height: 300px;margin: auto;background-color: white;box-sizing: border-box;padding: 20px 50px;}#divAddStudent h2{margin-bottom: 30px;}#divAddStudent p{margin-top: 10px;}#zhezhao{position: absolute;top: 0;bottom: 0;right: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.4);}.hidden{display: none;}.show{display: block;}tbody:empty:before{content:"当前没有学生，快去添加吧"}</style></head><body><div class="conter"><div><button id="btnAdd">添加</button><button id="delAll" onclick="delAll()"> 全部删除</button></div><table border="1" cellpadding="0" cellspacing="0"><thead><tr><th>学号</th><th>姓名</th><th>年龄</th><th>班级</th><th>操作</th></tr></thead><tbody id="tbStudent"></tbody></table><div id="divAddStudent" class="hidden"><h2>学生信息</h2><form action="#" id="addStudentForm"><p>学号：<input type="text" name="stuNo" id="stuNo"> </p><p>姓名：<input type="text" name="tuName" id="stuName"> </p><p>年龄：<input type="text" name="stuAge" id="stuAge"> </p><p>班级：<input type="text" name="stuClass" id="stuClass"> </p><p><button id="btnAddData" type="button">添加</button><buttonid="btnCancel">取消</button></p></form></div></div><div id="zhezhao"class="hidden"></div><script type="text/javascript">var studentArr=[//数组{"stuNo":"001","stuName":"小红","stuAge":16,"stuClass":"218"},{"stuNo":"002","stuName":"小米","stuAge":15,"stuClass":"219"},{"stuNo":"003","stuName":"小明","stuAge":15,"stuClass":"218"},{"stuNo":"004","stuName":"小蓝","stuAge":16,"stuClass":"218"},{"stuNo":"005","stuName":"小紫","stuAge":15,"stuClass":"219"},{"stuNo":"006","stuName":"小青","stuAge":15,"stuClass":"218"},{"stuNo":"007","stuName":"小白","stuAge":16,"stuClass":"218"},{"stuNo":"008","stuName":"小黄","stuAge":15,"stuClass":"219"},{"stuNo":"009","stuName":"小黑","stuAge":15,"stuClass":"218"}];var stuNoOper="";dataStudent();$("btnAdd").onclick=AddStudent;$("zhezhao").onclick=function () {model("divAddStudent","hidden");};$("btnCancel").onclick=function () {model("divAddStudent","hidden");};$("btnAddData").onclick=addStudentData;//添加学生function addStudentData() {var stuNo =$("stuNo").value;var stuName =$("stuName").value;var stuAge =$("stuAge").value;var stuClass =$("stuClass").value;if(stuNo==""){alert("学号不能为空");return;}else if (stuName==""){alert("姓名不能为空");return;}else if (stuAge==""){alert("年龄不能为空");return;}else if (stuClass==""){alert("班级不能为空");return;}if (stuNoOper==""){if (checkStudentNo(stuNo)){alert("当前学号已经存在");return;}varobj= {"stuNo":stuNo,"stuName":stuName,"stuAge":stuAge,"stuClass":stuClass};studentArr.push(obj);if (confirm("添加成功，是否继续添加")){$("stuNo").value="";$("stuName").value="";$("stuAge").value="";$("stuClass").value="";dataStudent();}else {model("divAddStudent","hidden");dataStudent();}}else {for(var i=0;i<studentArr.length;i++){if (studentArr[i].stuNo==stuNoOper){studentArr[i].stuName=stuName;studentArr[i].stuAge=stuAge;studentArr[i].stuClass=stuClass;alert("修改成功");model("divAddStudent","hidden");dataStudent();break;}}}}//模态框方法function model(id,type) {type=type || "show";$("zhezhao").className=type;$(id).className=type;}//修改学生functionupdate(stuno) {console.log(123)var stuObj=getStudentBystuNO(stuno);if(stuObj){stuNoOper=stuno;model("divAddStudent");$("stuNo").value=stuObj.stuNo;$("stuName").value=stuObj.stuName;$("stuAge").value=stuObj.stuAge;$("stuClass").value=stuObj.stuClass;}else {alert("输入有误")}}//获取修改学生信息function getStudentBystuNO(stuno) {for(var i=0;i<studentArr.length;i++){if(studentArr[i].stuNo==stuno){return studentArr[i];}}return null;}//添加，接收用户数据function AddStudent() {stuNoOper="";model("divAddStudent");}//数据显示function dataStudent() {var tbstudent=$("tbStudent");tbstudent.innerHTML="";for(var i=0; i<studentArr.length;i++){tbstudent.innerHTML+=`<tr><td>${studentArr[i].stuNo}</td><td>${studentArr[i].stuName}</td><td>${studentArr[i].stuAge}</td><td>${studentArr[i].stuClass}</td> <td><button onclick = 'del(${studentArr[i].stuNo})'>删除</button><button onclick = 'update(${studentArr[i].stuNo})'>修改</button></td></tr>`}}//删除function del(stuno) {if (confirm("确定要删除吗")){for (var i=0;i<studentArr.length;i++){if(studentArr[i].stuNo==stuno){studentArr.splice(i,1);alert("删除成功");dataStudent();break;}}}}//删除全部function delAll() {if (confirm("确定要删除吗")){studentArr=[];dataStudent();}}//验证学号function checkStudentNo(stuNo) {for( var i=0;i<studentArr.length;i++){if(studentArr[i].stuNo==stuNo){return true;}}return false;}//选择idfunction $(id) {return document.getElementById(id);}</script></body></html>