之前学习的时候做了一个简单的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> <button id="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;
}
var obj= {"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;
}
//修改学生
function update(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;
}
//选择id
function $(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> <button id="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;
}
var obj= {"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;
}
//修改学生
function update(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;
}
//选择id
function $(id) {
return document.getElementById(id);
}
</script>
</body>
</html>