* {
margin: 0;
padding: 0;
}
header, .main, .main_informationDisplay>div {
padding: 20px;
}
header {
background-color: rgb(53, 138, 136);
color: #fff;
letter-spacing: 5px;
}
.main {
display: flex;
}
.main_menu:hover {
cursor: pointer;
}
.main_informationDisplay {
display: flex;
flex-grow: 1;
margin-left: 20px;
}
.main_informationDisplay>div {
flex-grow: 1;
border-width: 2px;
border-style: solid;
border-color: transparent;
}
table, th, td {
border: 1px solid #ccc;
}
table {
width: 100%;
}
.studentsList>caption {
font: 1.17em bolder;
}
/* h2 样式 */
.main_menu {
padding: 10px 20px;
background-color: rgb(32, 82, 80);
margin-bottom: 4px;
color: rgb(53, 138, 136);
}
/* 效果 */
.menu_checked {
background-color: rgb(53, 138, 136);
color: #fff;
}
.main_informationDisplay_checked {
border-color: #006363 !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>student system 3.0</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<header>
<h1>学生管理系统</h1>
</header>
<div class="main">
<section>
<h2 class="main_menu menu_checked">学生列表</h2>
<h2 class="main_menu">新增学生</h2>
<h2 class="main_menu">修改学生</h2>
<h2 class="main_menu">查询学生</h2>
</section>
<div class="main_informationDisplay">
<div class="main_informationDisplay_checked">
<table class="studentsList">
<caption>学生列表</caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<span id="tips"></span>
</div>
<div>
<h3>新增学生</h3>
<form action="#" id="addForm">
<div>
<label for="addname">姓名</label>
<input type="text" id="addname" class="name">
</div>
<div>
<label for="addage">年龄</label>
<input type="text" id="addage" class="age">
</div>
<div>
<span>性别</span>
<label for="addmale">男</label>
<input type="radio" name="gender" id="addmale" value="男">
<label for="addfemale">女</label>
<input type="radio" name="gender" id="addfemale" value="女">
</div>
<input type="button" value="确认新增" id="addBtn">
</form>
</div>
<div>
<h3>修改学生</h3>
<form action="#" id="modifyForm">
<div>
<label for="modifyname">姓名</label>
<input type="text" id="modifyname" class="name">
</div>
<div>
<label for="modifyage">年龄</label>
<input type="text" id="modifyage" class="age">
</div>
<div>
<span>性别</span>
<label for="modifymale">男</label>
<input type="radio" name="gender" id="modifymale" value="男">
<label for="modifyfemale">女</label>
<input type="radio" name="gender" id="modifyfemale" value="女">
</div>
<input type="button" value="确认修改" id="modifyBtn" disabled>
</form>
</div>
<div>
<h3>查询学生</h3>
<form action="#" id="queryForm">
<select name="" id="">
<option value="name">姓名</option>
<option value="age">年龄</option>
<option value="gender">性别</option>
</select>
<input type="text" placeholder="查询内容">
<input type="button" value="搜索" id="queryBtn">
</form>
</div>
</div>
</div>
</div>
<script src="./common.js"></script>
</body>
</html>
let studentsData = [
{ id: 1, name: '汪印星', age: '24', gender: '男' },
{ id: 2, name: '李寅峰', age: '22', gender: '男' },
{ id: 3, name: '钟鑫茂', age: '22', gender: '女' },
{ id: 4, name: '张胜江', age: '24', gender: '男' },
{ id: 5, name: '徐阳', age: '25', gender: '男' },
{ id: 6, name: '杨烨', age: '26', gender: '男' },
{ id: 7, name: '杨恩', age: '25', gender: '女' },
{ id: 8, name: '夏琪琦', age: '22', gender: '女' },
{ id: 9, name: '罗雷', age: '26', gender: '男' },
{ id: 10, name: '陈阳吉', age: '22', gender: '男' }
];
let lastId = studentsData[studentsData.length - 1].id;
// ------------ 右侧 div 点击、input 点击 添加效果
let main_info_arr = document.querySelectorAll(".main_informationDisplay>div"); // 所有 div
let h2_arr = document.querySelectorAll(".main>section>h2"); // 所有 h2
main_info_arr.forEach((item, index) => {
item.onclick = function () {
main_info_arr.forEach(item => item.classList.remove("main_informationDisplay_checked")); // 去掉所有 div 框
item.classList.add("main_informationDisplay_checked"); // 某一个 div 添加边框
h2_arr.forEach(item => item.classList.remove("menu_checked"));// 去掉所有 h2 样式
h2_arr[index].classList.add("menu_checked");
}
});
// ------ h2 点击改变样式
h2_arr.forEach((item, index) => {
item.addEventListener("click", () => {
h2_arr.forEach(item => item.classList.remove("menu_checked"));
item.classList.add("menu_checked");
main_info_arr.forEach(item => item.classList.remove("main_informationDisplay_checked"));
main_info_arr[index].classList.add("main_informationDisplay_checked");
});
});
// --------------- 渲染学生数据
let tbody = document.querySelector(".studentsList>tbody");
function render(arr = studentsData) {
tbody.innerHTML = arr.map(item =>
`<tr>
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.age}</td>
<td>${item.gender}</td>
<td>
<input type="button" value="修改" data-func="modify" data-index='${item.id}'>
<input type="button" value="删除" data-func="delete" data-index='${item.id}'>
</td>
</tr>`
).join("");
}
render();
// ------ 公用元素
let name, age, gender;
let tips = document.getElementById("tips");
// -------------- 新增学生
let add_btn = document.getElementById("addBtn");
add_btn.onclick = function () {
name = document.querySelector("#addForm .name");
age = document.querySelector("#addForm .age");
gender = document.getElementById("addForm").gender.value;
if (name.value && age.value) {
studentsData.push({ id: lastId + 1, name: name.value, age: age.value, gender: gender ? gender : "男" });
lastId++;
render();
}
name.value = "";
age.value = "";
}
// -------------- 修改学生 从表格里点击 修改
let modify_btn = document.getElementById("modifyBtn"); // 右侧 确认修改 按钮
let student;
tbody.onclick = function (event) {
if (event.target.nodeName == "INPUT") {
if (event.target.dataset.func == "modify") { // 点击修改
modify_btn.disabled = false;
name = document.querySelector("#modifyForm .name");
age = document.querySelector("#modifyForm .age");
gender_Arr = document.querySelectorAll("#modifyForm [type='radio']");
[student] = studentsData.filter(item => item.id == event.target.dataset.index); // 获得需要修改的学生对象
name.value = student.name;
age.value = student.age;
student.gender == "男" ? gender_Arr[0].checked = true : gender_Arr[1].checked = true;
} else if (event.target.dataset.func == "delete") { // 点击删除
studentsData.forEach((item, index) => {
if (item.id == event.target.dataset.index) {
let result = confirm("是否删除：" + item.name + "?");
result ? studentsData.splice(index, 1) : "";
}
});
render();
}
}
}
// ---------- 点击修改学生
modify_btn.onclick = function () {
name = document.querySelector("#modifyForm .name").value;
age = document.querySelector("#modifyForm .age").value;
gender = document.getElementById("modifyForm").gender.value;
for (let i = 0; i < studentsData.length; i++) {
if (studentsData[i].id == student.id) {
studentsData.splice(i, 1, { id: student.id, name, age, gender });
break;
}
}
render();
}
// -------- 查询学生
let query_btn = document.getElementById("queryBtn");
query_btn.onclick = function () {
let type = document.querySelector("#queryForm>select").value;
let content = document.querySelector("#queryForm [type='text']").value;
let arr;
if (content) {
arr = studentsData.filter(item => item[type] == content);
}
arr.length ? tips.innerText = "" : tips.innerText = "无数据";
render(arr);
}
// ---------- 点击左侧 学生列表 刷新显示区域
let student_list = document.querySelector(".main>section>h2:first-child");
student_list.addEventListener("click", () => {
render();
tips.innerText = "";
})
浙公网安备 33010602011771号