学生管理系统html js,js学生管理系统。

学生管理系统

input[type="text"] {

border-radius: 20px;

outline: none;

padding-left: 10px;

border: 1px solid;

}

table {

margin-top: 10px;

text-align: center;

}

table button {

margin: 0 2px;

border-radius: 10px;

outline: none;

}

#addStu {

border-radius: 10px;

outline: none;

}

学生管理系统

学生姓名：

学生年龄：

学生性别：

男

女

考试成绩：

添加学生

// 获取 DOM 元素

let tab = document.getElementById(‘stuInfo‘);

let addStu = document.getElementById(‘addStu‘);

let stuName = document.getElementById(‘stuName‘);

let stuAge = document.getElementById(‘stuAge‘);

let stuScore = document.getElementById(‘stuScore‘);

let stuGender = document.getElementsByName(‘stuGender‘);

let index = null; // 记录修改时的下标值

// 初始化数据先为null，之后会从localStorage里面获取数据

let stuInfo = null;

// 渲染函数

let render = function (stuInfo) {

tab.innerHTML = ‘‘; // 首先重置table里面的内容，将其清空

if (stuInfo.length !== 0) {

let thead = ‘

学生姓名学生年龄学生性别考试成绩操作‘;

let tbody = ‘‘;

for (let i = 0; i < stuInfo.length; i++) {

tbody += `

${stuInfo[i].stuName}${stuInfo[i].stuAge}${stuInfo[i].stuGender}${stuInfo[i].stuScore}修改删除`;

}

tab.innerHTML += thead + tbody;

}

else {

tab.innerHTML = ‘‘;

}

}

// JSON和数组相互转换函数，自动检测，如果传入的是JSON，那就转为数组；如果传入的是数组就转为JSON

let typeChange = function (a) {

if (Array.isArray(a)) {

let obj = {};

for (let key in a) {

obj[key] = a[key];

}

return obj;

}

else {

let arr = [];

for (let key in a) {

arr[key] = a[key];

}

return arr;

}

}

// 初次页面加载好时调用render函数

window.onload = function () {

// 第一次localStorage里面没有任何数据，所以我们做一些初始化工作

if (localStorage.stuInfo === undefined) {

// 初始化数据 之所以初始化为JSON是为了方便转换为字符串存入localStorage

let info = {

0: { ‘stuName‘: ‘谢杰‘, ‘stuAge‘: 18, ‘stuGender‘: ‘男‘, ‘stuScore‘: 100 },

1: { ‘stuName‘: ‘雅静‘, ‘stuAge‘: 20, ‘stuGender‘: ‘女‘, ‘stuScore‘: 97 },

2: { ‘stuName‘: ‘希之‘, ‘stuAge‘: 1, ‘stuGender‘: ‘男‘, ‘stuScore‘: 100 },

3: { ‘stuName‘: ‘小张‘, ‘stuAge‘: 25, ‘stuGender‘: ‘男‘, ‘stuScore‘: 93 },

4: { ‘stuName‘: ‘老刘‘, ‘stuAge‘: 20, ‘stuGender‘: ‘女‘, ‘stuScore‘: 88 }

}

localStorage.stuInfo = JSON.stringify(info); // 将数据转换为字符串存入localStorage

stuInfo = typeChange(info); // 将数据转换为数组方便进行操作

}

else {

// 进入此分支说明localStorage里面有东西，直接从localStorage里面获取即可

stuInfo = typeChange(JSON.parse(localStorage.stuInfo));

}

render(stuInfo); // 渲染出数据

}

// 根据表单控件的值新建一个学生对象 因为新增和修改都会用到，所以单独提取出来

// 该函数会返回建立好的学生对象

let makeNewStu = function () {

// 获取单选框的值

let stuGenderValue = null;

for (let i = 0; i < stuGender.length; i++) {

if (stuGender[i].checked === true) {

stuGenderValue = stuGender[i].value;

}

}

// 构成对象

let newStu = { ‘stuName‘: stuName.value, ‘stuAge‘: stuAge.value, ‘stuGender‘: stuGenderValue, ‘stuScore‘: stuScore.value };

return newStu;

}

addStu.addEventListener(‘click‘, function () {

if (addStu.innerHTML === ‘添加学生‘) {

if (stuName.value === ‘‘ || stuAge.value === ‘‘ || stuScore.value === ‘‘) {

alert(‘信息不能为空‘);

}

else {

let newStu = makeNewStu(); // 新建一个学生对象

// 将对象推入stuInfo数组

stuInfo.push(newStu);

// 重新渲染

render(stuInfo);

// 更新本地存储的数据 先转换为JSON对象，然后再转为字符串

localStorage.stuInfo = JSON.stringify(typeChange(stuInfo));

// 清空文本框

stuName.value = "";

stuAge.value = "";

stuGender[0].checked = true;

stuScore.value = "";

}

}

else {

// 下一步就是获取修改的信息

let newInfo = makeNewStu(); // 直接调用该函数获取表单的值即可

stuInfo.splice(index, 1, newInfo); // 对数组进行修改

render(stuInfo); // 重新渲染

// 更新本地存储的数据 先转换为JSON对象，然后再转为字符串

localStorage.stuInfo = JSON.stringify(typeChange(stuInfo));

addStu.innerHTML = ‘添加学生‘;

// 清空文本框

stuName.value = "";

stuAge.value = "";

stuScore.value = "";

stuGender[0].checked = true;

}

}, false);

// 删除学生 如果使用JQ，可以直接使用on绑定事件，因为on默认自带事件委托，无论是一开始有的元素，还是后面新增的元素，都会被绑定事件

// 这里由于我们使用的是原生JS，这些元素是后面生成的，所以只有通过事件写在HTML代码里面的形式来绑定事件

let delStu = function (i) {

if (window.confirm(‘确定是否要删除此学生?‘)) {

stuInfo.splice(i, 1); // 删除数组元素

render(stuInfo); // 重新进行渲染

// 更新本地存储的数据 先转换为JSON对象，然后再转为字符串

localStorage.stuInfo = JSON.stringify(typeChange(stuInfo));

}

}

// 修改学生，稍微麻烦点，具体的思路是先获取要修改的学生的信息，然后填入表单控件

// 当用户点击确认修改后，重新修改数组，最后进行渲染

let editStu = function (i) {

addStu.innerHTML = ‘确认修改‘;

// 获取到数据填入表单控件

stuName.value = stuInfo[i].stuName;

stuAge.value = stuInfo[i].stuAge;

if (stuInfo[i].stuGender === ‘男‘) {

stuGender[0].checked = true;

}

else {

stuGender[1].checked = true;

}

stuScore.value = stuInfo[i].stuScore;

index = i; // 记录要修改的元素的下标值是多少

}