学习js中的一个小案例，做一个简易版的学生信息管理系统.
一开始给的是一个对象数组的信息的js文件。增删查改都是通过对数据进行操作，之后渲染道页面上。但是我们操作却不能直接修改源文件，所以先创建一个数组，将源文件上的数据传入数组之后再对我们数组进行操作
var arr = [];
var ul = document.getElementsByClassName('user')
function datadate() {
for (let i = 0; i < dataUser.length; i++) {
arr.push(Object.values(dataUser[i]));
}
}
datadate()
创建管理列表，虽然表格很符合，但表格样式不好写，所以我们这里用ul，li。搭建框架
<div class="box">
<ul class="nav">
<li><input type="checkbox">全选</li>
<li>学号</li>
<li>姓名</li>
<li>性别</li>
<li>年龄</li>
<li>生日</li>
<li>电话</li>
<li>籍贯</li>
<li>备注</li>
<li>操作</li>
</ul>
<div class="list"></div>
</div>
然后开始将arr中的数据渲染到数组中
var list = document.querySelector(".list")
function xr() {
list.innerHTML = ""
for (var i = 0; i < arr.length; i++) {
var ul = document.createElement("ul")
ul.className = "user"
//创建ul,给所有ulclassname为user
var lifirst = document.createElement("li")
lifirst.innerHTML = ' <input type="checkbox">'
ul.appendChild(lifirst)
//创建头一个li,内部嵌套checkbox
for (var j = 0; j < arr[0].length; j++) {
var li = document.createElement("li")
li.innerHTML = arr[i][j]
ul.appendChild(li)
}
//通过for循环将数组中数据导入其中
var lilast = document.createElement("li")
lilast.innerHTML = ' <button>查看</button><button>修改</button> '
ul.appendChild(lilast)
list.appendChild(ul)
//创建尾部li,里面放查改按钮
}
var ul = document.getElementsByClassName('user')
for (var i = 0; i < ul.length; i++) {
ul[i].children[0].firstElementChild.onclick = function () {
selectone()
}
}
//通过for循环，将每个checkbox加上点击事件
}
xr();
function selectAll() {
//多选判断，如果开头checkbox选中时，下面所有checkbox选中，反之也一样
var qx = document.querySelector('.nav input')
var ul = document.getElementsByClassName('user')
if (qx.checked == true) {
for (var i = 0; i < ul.length; i++) {
ul[i].children[0].firstElementChild.checked = true
}
}
if (qx.checked == false) {
for (var i = 0; i < ul.length; i++) {
ul[i].children[0].firstElementChild.checked = false
}
}
}
var qx = document.querySelector('.nav input')
qx.onclick = function () {
selectAll()
}
function selectone() {
//单选判断，判断下面所有checkbox状态，全为选中则全选也会选中,有一个没选中则全选不会选中
var ul = document.getElementsByClassName('user')
var length = ul.length
var qx = document.querySelector('.nav input')
var sure = [false, false];
for (var i = 0; i < length; i++) {
if (ul[i].children[0].firstElementChild.checked == true) {
sure[i] = true
} else if (ul[i].children[0].firstElementChild.checked == false) {
sure[i] = false
}
}
function a(i) {
return i == true
}
qx.checked = sure.every(a)
}
增加，通过给button添加点击事件，通过获取用户新增的值，将其加到数组数据中，在渲染一遍数组，就到达增加数据作用
function add() {
var span = document.querySelector('.form span')
span.innerHTML = '新增';
span.style.marginLeft = '10px'
var form = document.getElementsByClassName('form')[0]
form.style.display = 'block'
var bbb = document.querySelector('.bbb')
bbb.style.display = 'block'
}
var a = document.getElementsByClassName('btna')[0]
a.onclick = function () {
var int = document.querySelectorAll('.form input')
for (var i = 0; i < int.length; i++) {
int[i].value = ''
}
add()
}
var int = document.querySelectorAll('.form int')
for (var i = 0; i < int.length; i++) {
int[i].oninput = function () {
console.log(int[i].style.value);
}
}
function getdata() {
var oID = document.querySelectorAll('.form input')[0].value
var oname = document.querySelectorAll('.form input')[1].value
var osex = document.querySelectorAll('.form input')[2].value
var oage = document.querySelectorAll('.form input')[3].value
var obir = document.querySelectorAll('.form input')[4].value
var otel = document.querySelectorAll('.form input')[5].value
var odl = document.querySelectorAll('.form input')[6].value
var obz = document.querySelectorAll('.form input')[7].value || "这是默认描述，什么都没有"
var obj = new Object();
obj.stuID = oID;
obj.stuName = oname;
obj.stuSex = osex;
obj.stuAge = oage;
obj.stuBirthday = obir;
obj.stuTelNum = otel;
obj.stuNativePlace = odl;
obj.stuDescribe = obz;
arr.unshift(Object.values(obj));
}
删除，通过数组方法splice将数组数据删除，但是删除第一个之后，第二个变成第一个，删完第一个删第二个，这样全删就会漏掉一半，所以我们先确定check为true的，然后获取它的其他数据，check可以改变，其他暂时性改不了，所以在通过其他的属性进行删除，也可以i删除之后对他进行自减操作这样就只删第一个，循环操作之后就可以删完
function del() {
var ul = document.getElementsByClassName('user')
for (var i = 0; i < ul.length; i++) {
if (ul[i].children[0].firstElementChild.checked == true) {
for (var j = 0; j < arr.length; j++) {
if (ul[i].children[1].innerHTML == arr[j][0]) {
arr.splice(j, 1)
}
}
}
}
console.log(arr);
}
var btnd = document.querySelector('.btnd')
btnd.onclick = function () {
del();
xr();
}
查看与修改，通过i值获取查看的ul，在将ul的数据放入input中，达到查看效果，修改就相当于新增，我们新增用push，修改则直接对数组数据进行修改即可
function view() {
for (var i = 0; i < ul.length; i++) {
ul[i].lastElementChild.firstElementChild.onclick = function () {
var form = document.getElementsByClassName('form')[0]
form.style.display = 'block'
var bbb = document.querySelector('.bbb')
bbb.style.display = 'block'
var inp = document.querySelectorAll('.form input')
var span = document.querySelector('.form span')
span.innerHTML = '查看'
inp[0].value = this.parentElement.parentElement.children[1].innerHTML
inp[1].value = this.parentElement.parentElement.children[2].innerHTML
inp[2].value = this.parentElement.parentElement.children[3].innerHTML
inp[3].value = this.parentElement.parentElement.children[4].innerHTML
inp[4].value = this.parentElement.parentElement.children[5].innerHTML
inp[5].value = this.parentElement.parentElement.children[6].innerHTML
inp[6].value = this.parentElement.parentElement.children[7].innerHTML
inp[7].value = this.parentElement.parentElement.children[8].innerHTML
}
}
}
function change() {
for (let i = 0; i < ul.length; i++) {
ul[i].lastElementChild.lastElementChild.onclick = function () {
var form = document.getElementsByClassName('form')[0]
form.style.display = 'block'
var bbb = document.querySelector('.bbb')
bbb.style.display = 'block'
var inp = document.querySelectorAll('.form input')
var span = document.querySelector('.form span')
span.innerHTML = '修改';
var oID = document.querySelectorAll('.form input')[0].value
var oname = document.querySelectorAll('.form input')[1].value
var osex = document.querySelectorAll('.form input')[2].value
var oage = document.querySelectorAll('.form input')[3].value
var obir = document.querySelectorAll('.form input')[4].value
var otel = document.querySelectorAll('.form input')[5].value
var odl = document.querySelectorAll('.form input')[6].value
var obz = document.querySelectorAll('.form input')[7].value || "这是默认描述，什么都没有"
arr[i][0] = oID
arr[i][1] = oname
arr[i][2] = osex
arr[i][3] = oage
arr[i][4] = obir
arr[i][5] = otel
arr[i][6] = odl
arr[i][7] = obz
}
}
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
