界面样式
主要功能
- 添加学生
- 删除学生
- 鼠标悬停时，将所在行变为绿色
- 支持全选，反选，和全不选
代码部分
<html>
<head>
<meta charset="UTF-8">
<title>学生信息管理系统</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="title">学生信息管理系统</div>
<div id="input-box">
<input id="id" type="text" placeholder="请输入学号" name="id">
<input id="name" type="text" placeholder="请输入姓名" name="name">
<input id="gender" type="text" placeholder="请输入性别" name="gender">
<button id="add">添加</button>
</div>
<br>
<br>
<div id="table-box">
<div id="title1">学生信息表
<br>
<button id="arcall">反选</button>
<button id="empty">全不选</button>
<button id="all">全选</button>
</div>
<table id="stutable">
<tr id="row1">
<td></td>
<td>编号</td>
<td>姓名</td>
<td>性别</td>
<td>操作</td>
</tr>
</table>
</div>
</body>
<footer>
<script src="js/index.js"></script>
</footer>
</html>
div {
width: 100%;
text-align: center;
margin: auto;
}
#title {
font-weight: 700;
}
#stutable {
width: 50%;
margin: 3px auto;
border: 1px solid black;
text-align: center;
}
#stutable tr td {
width: 120px;
text-align: center;
border: 1px solid black;
}
#title1 {
margin: auto auto;
font-weight: 700;
width: 30%;
}
#title1 button {
}
var studentAddButton = document.getElementById("add");
function createCell(name) {
var message = document.getElementById(name);
var textNode = document.createTextNode(message.value);
var cell = document.createElement("td");
cell.appendChild(textNode);
return cell;
}
function createDeleteCell() {
var textNode = document.createTextNode("删除");
var deleteCell = document.createElement("a");
deleteCell.appendChild(textNode);
deleteCell.setAttribute("href", "javascript:void(0);");
deleteCell.setAttribute("id", "delete");
deleteCell.onclick = function () {
var parent = this.parentNode;
var tmp = parent = parent.parentNode;
parent = parent.parentNode;
parent.removeChild(tmp);
}
var cell = document.createElement("td");
cell.appendChild(deleteCell);
return cell
}
function createSmallCell() {
var box = document.createElement("input");
box.setAttribute("type", "checkbox");
box.setAttribute("class", "cbox");
var smallCell = document.createElement("td");
smallCell.appendChild(box);
return smallCell;
}
studentAddButton.onclick = function () {
var table = document.getElementById("stutable");
var nextRow = document.createElement("tr");
nextRow.appendChild(createSmallCell());
nextRow.appendChild(createCell("id"));
nextRow.appendChild(createCell("name"));
nextRow.appendChild(createCell("gender"));
nextRow.appendChild(createDeleteCell());
nextRow.onmouseover = function () {
nextRow.style.backgroundColor = "yellowgreen";
}
nextRow.onmouseout = function () {
nextRow.style.backgroundColor = "white"
}
table.appendChild(nextRow);
}
var all = document.getElementById("all");
all.onclick = function () {
var checkboxList = document.getElementsByClassName("cbox");
for (var i = 0; i < checkboxList.length; i++) {
var box = checkboxList[i];
if (!box.checked) {
box.click();
}
}
}
document.getElementById("empty").onclick = function () {
var checkboxList = document.getElementsByClassName("cbox");
for (var i = 0; i < checkboxList.length; i++) {
var box = checkboxList[i];
if (box.checked) {
box.click();
}
}
}
document.getElementById("arcall").onclick = function () {
var checkboxList = document.getElementsByClassName("cbox");
for (var i = 0; i < checkboxList.length; i++) {
checkboxList[i].click();
}
}
