HTML部分
<div class="box">
<head>
<h2>表格管理系统</h2>
<div class="s">
<label>姓名：</label><input type="text" class="searchUname"><button class="search">查询</button>
</div>
</head>
<div class="content clearfix">
<form class="left">
<label>姓名：</label>
<input type="text" class="uname hx"> 学号：
<input type="text" class="uid hx"> 性别：
<input type="text" class="sex hx"> 年龄：
<input type="text" class="age hx">
<input type="button" class="add" value="添加">
</form>
<table border="1" cellspacinbg="0">
<thead>
<th>序号</th>
<th>姓名</th>
<th>学号</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
CSS部分
* {
padding: 0;
margin: 0;
}
body {
background: url(../img/bg.jpg);
background-repeat: no-repeat;
background-size: cover;
font-family: '宋体';
}
a {
text-decoration: none;
}
.box .s {
position: absolute;
top: 1%;
left: 0%;
text-align: left;
padding-left: 10px;
}
h2 {
font-size: 36px;
font-family: '宋体';
}
.box {
position: relative;
width: 880px;
height: 700px;
background-color: rgba(255, 255, 255, 0.5);
margin: 0 auto;
text-align: center;
}
.content {
display: flex;
justify-content: space-around;
}
.content .left {
width: 165px;
}
table {
width: 666px;
height: 25px;
font-size: 20px;
}
js部分
获取元素
var num = 1; //自增序号
var data = []; //存储数据（类似于数据库）
var uname = document.querySelector('.uname'); //姓名输入框元素
var uid = document.querySelector('.uid'); //学号输入框元素
var sex = document.querySelector('.sex'); //性别输入框元素
var age = document.querySelector('.age'); //年龄输入框元素
var btn = document.querySelector('.add'); //添加输入框元素
var tbody = document.querySelector('tbody'); //表主体元素
var search = document.querySelector('.search'); //按钮查询
var searchUname = document.querySelector('.searchUname'); //按钮查询前的输入框元素
var flag = false; //判断添加按钮是添加状态还是编辑状态
添加模块
点击添加按钮首先判断当前状态是添加还是更新（此判断是编辑时加上去的，如果只写添加功能请忽略），如果为添加状态首先判断输入框是否为空，如果为空给一个弹窗提示，不为空时先判断有没有相同的学号，有相同学号时给一个弹窗提示，没有相同学号时往data数组里添加数据，然后按照要求先创建一个tr节点，然后在tr里再创建td节点，最后给里面的删除编辑a标签绑定事件
btn.onclick = function() {
if (flag) { //如果flag为true说明在编辑状态
var obj = {
uname: uname.value,
uid: uid.value,
sex: sex.value,
age: age.value
};
update(obj);
uid.removeAttribute('readonly');
load();
} else if (uname.value.trim() == '' || uid.value.trim() == '' || sex.value.trim() == '' || age.value.trim() == '') { //判断数据不能为空
alert('数据不能为空');
} else {
if (check(uid.value)) { //检查是否有学号相同的
data.push({
uname: uname.value,
uid: uid.value,
sex: sex.value,
age: age.value
});
var arr = [uname.value, uid.value, sex.value, age.value]; //创建一个临时数组为了方便赋值
var tr = document.createElement('tr');
tr.style.height = 25 + 'px';//每次创建25px高度的tr
tbody.appendChild(tr);
tr.setAttribute('index', num);
var xh = document.createElement('td');
xh.innerHTML = num++;
tr.appendChild(xh);
for (var i = 0; i < 5; i++) {
if (i == 4) { //判断是否到操作这个单元格
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;" class="del">删除</a> <a href="javascript:;" class="edit">编辑</a><a href="javascript:;" class="up">↑</a><a href="javascript:;" class="down">↓</a>';
} else {
var td = document.createElement('td');
td.innerHTML = arr[i];
td.className = 'nr';//给每个新创建的td添加类名
}
tr.appendChild(td);
}
binding(); //给删除编辑a标签绑定事件
} else {
alert('不能添加相同学号的数据');
}
}
};
// 检查是否有相同学号
function check(uid) {
if (data.length < 1) return true;//如果原数据数组为空直接返回true
for (var i = 0; i < data.length; i++) {
if (data[i].uid === uid) {
return false;
}
}
return true;
}
绑定事件的方法
//给a标签里的删除编辑绑定事件
function binding() {
//为删除绑定数据
var dels = document.querySelectorAll('.del');
for (var i = 0; i < dels.length; i++) {
dels[i].onclick = function() {
uid.removeAttribute('readonly');
flag = false;
if (confirm('确认删除？')) {//如果点的是确定
var id = this.parentNode.previousSibling.previousSibling.previousSibling;//获取当前行的学号
del(id.innerHTML);//del()是自己封装的一个方法
load();//自己封装的重新加载数据的方法
}
}
}
//下为编辑绑定事件
var edits = document.querySelectorAll('.edit');//获取所有编辑a标签
for (let i = 0; i < edits.length; i++) {//为所有编辑绑定点击事件
edits[i].onclick = function() {
var four = this.parentNode.previousSibling;//获取年龄这个td元素
var three = this.parentNode.previousSibling.previousSibling;//获取性别这个td元素
var two = this.parentNode.previousSibling.previousSibling.previousSibling;//获取学号这个td元素
var one = this.parentNode.previousSibling.previousSibling.previousSibling.previousSibling;//获取姓名这个td元素
//回显到左边输入框
uname.value = one.innerHTML;
uid.value = two.innerHTML;
sex.value = three.innerHTML;
age.value = four.innerHTML;
var id = two.innerHTML;
uid.setAttribute('readonly', 'readonly');//为学号设置只读属性
flag = true;//当前添加按钮现在为更新状态
var nrs = this.parentNode.parentNode.querySelectorAll('.nr');//获取当行所有的类名带有nr的元素
for (var j = 0; j < nrs.length; j++) {
var temp = nrs[j].innerHTML;//先用一个中间变量存储当前td里的内容
nrs[j].innerHTML = '<input type="text"/>';//把td里的内容变成一个input
nrs[j].children[0].value = temp;//给input一开始存储的td内容
if (j == 1) {
nrs[j].children[0].setAttribute('readonly', 'readonly');
}
}
var hxs = document.querySelectorAll('.hx');
for (let k = 0; k < nrs.length; k++) {
nrs[k].children[0].onchange = function() {
hxs[k].value = nrs[k].children[0].value;
}
}
nrs[0].children[0].focus();
this.innerHTML = '更新';
this.className = 'renew';
renewdata();//自己封装更新数据的方法
return;
}
}
};
重新加载数据的方法
function load() {
tbody.innerHTML = '';//清空tBody元素里的所有内容
num = 1;//自增序号要重新从1加载
for (var i = 0; i < data.length; i++) {
var tr = document.createElement('tr');
tbody.appendChild(tr);
tr.setAttribute('index', num);
var xh = document.createElement('td');
xh.innerHTML = num++;
tr.appendChild(xh);
for (var k in data[i]) {
var td = document.createElement('td');
td.innerHTML = data[i][k];
td.className = 'nr';
tr.appendChild(td);
}
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;" class="del">删除</a> <a href="javascript:;" class="edit">编辑</a><a href="javascript:;" class="up">↑</a><a href="javascript:;" class="down">↓</a>';
tr.appendChild(td);
}
var inps = document.querySelectorAll('input');//获取左边的所有输入框的元素
for (var i = 0; i < inps.length; i++) {
inps[i].value = '';//将输入框的内容清空
}
binding();//给a标签里的删除编辑绑定事件
}
删除模块
点击删除时会弹出一个确认框，如果点击确定时，先拿到当前行的学号，调用del方法
function del(uid) {//uid为你点击确定时获取当前行的学号
for (var i = 0; i < data.length; i++) {//遍历原数据数组
if (data[i].uid == uid) {
data.splice(i, 1);//学号匹配上把当前这个数据删除
return;
}
}
}
查询模块
点击查询按钮时，先获取按钮前输入框的内容，然后调用select方法
//点击查询按钮
search.onclick = function() {
uid.removeAttribute('readonly');
flag = false;
select(searchUname.value);//自己封装的查询方法
}
//根据姓名查询
function select(uname) {//uname为点击按钮时输入框的内容
if (uname == '') {//如果姓名为空就把所有数据重新加载出来
load();
return;
}
var res = [];//临时数组用来存储当前查出的信息
for (var i = 0; i < data.length; i++) {
if (data[i].uname == uname) {
res.push({
uname: data[i].uname,
uid: data[i].uid,
sex: data[i].sex,
age: data[i].age
});
}
}
//查询完以后把临时数组数据加载在表格里
tbody.innerHTML = '';
num = 1;
for (var i = 0; i < res.length; i++) {
var tr = document.createElement('tr');
tbody.appendChild(tr);
tr.setAttribute('index', num);
var xh = document.createElement('td');
xh.innerHTML = num++;
tr.appendChild(xh);
for (var k in res[i]) {
var td = document.createElement('td');
td.innerHTML = res[i][k];
td.className = 'nr';
tr.appendChild(td);
}
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;" class="del">删除</a> <a href="javascript:;" class="edit">编辑</a><a href="javascript:;" class="up">↑</a><a href="javascript:;" class="down">↓</a>';
tr.appendChild(td);
}
binding();
}
编辑模块
点击编辑时先获取当前姓名、学号、性别、学号，把当前编辑变为更新，类名为renew，并且把信息回显到左边的输入框，并且给左边的学号输入框设置只读属性，添加按钮变为更新状态，再获取当前行的类名为nr的td元素，遍历给每个nr里面添加input标签，并且赋相应的值，到学号那个input设置只读属性，点击更新时调用renewdata方法，如果点击添加就调用update方法
function renewdata() {
var renews = document.querySelectorAll('.renew');//获取所有类名为rennew的元素
for (let i = 0; i < renews.length; i++) {//给每个renew绑定点击事件
renews[i].onclick = function() {
var nrs = this.parentNode.parentNode.querySelectorAll('.nr');//获取当前renew这行的所有类名为nr的td元素
var obj = [];//临时数组用来存储nr里每一个input元素的内容
for (var k = 0; k < 4; k++) {
obj[k] = nrs[k].children[0].value;
}
var id = obj[1];//当前行的学号
newData(id, obj);//调用newData方法把原数据修改
this.innerHTML = '编辑';//把当前更新变为编辑
this.className = 'edit';//类名改为edit
flag = false;//添加按钮为添加状态
uid.value = '';//学号输入框清空内容
uname.value = '';//姓名输入框清空内容
age.value = '';//年龄输入框清空内容
sex.value = '';//性别输入框清空内容
uid.removeAttribute('readonly');//把学号输入框移除只读属性
for (var i = 0; i < nrs.length; i++) {//把nr里的input标签清除
var temp = nrs[i].children[0].value;//先用一个中间变量存储当前nr里input里的内容
nrs[i].innerHTML = temp;//把nr里的内容变为temp
}
binding();
}
}
}
// 点击更新时更新原数据
function newData(uid, obj) {
for (var i = 0; i < data.length; i++) {
if (uid == data[i].uid) {
data[i].uname = obj[0];
data[i].uid = obj[1];
data[i].sex = obj[2];
data[i].age = obj[3];
return;
}
}
}
//编辑状态下点添加更新原数据
function update(obj) {
for (var i = 0; i < data.length; i++) {
if (data[i].uid == obj.uid) {
data[i].uname = obj.uname;
data[i].uid = obj.uid;
data[i].sex = obj.sex;
data[i].age = obj.age;
flag = false;
return;
}
}
}
2947
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
