在前面的教程中，我们已经详细讲解了HTML、CSS、JavaScript的基础知识。本节教程我们将实现一个基于HTML、CSS和JavaScript构建的学生信息管理系统，包括添加、修改和删除学生信息的功能。用户界面通过HTML和CSS设计，利用JavaScript模拟连接数据库的操作。在实际应用中，你需要将数据存储逻辑连接到后端数据库，实现对学生信息的管理。
1、学生信息管理系统概述
这个简单的学生信息管理系统无连接后端数据库，通过使用HTML、CSS和JavaScript来创建一个基本的学生信息管理界面。用户可以添加新的学生信息或删除旧的学生信息，每次添加后都会模拟数据库操作，立即更新表格中的内容。同时，每行信息后面的“修改”按钮可以修改相应的学生信息。注意，该系统只是临时修改HTML页面中标签的内容，非实际存储数据，手动刷新页面后将会回到初始界面的数据。在实际应用中，需要更复杂的逻辑来处理学生信息的持久化存储，例如通过与后端服务器交互，再使用MySQL数据库存储数据等。
学生信息管理系统实现效果如下图所示：
2、创建基于HTML、CSS、JavaScript的3个基础文件
首先，我们在任意位置创建一个“students”文件夹，然后进入“students”文件夹创建如下3个文件：
students/
├── index.html
├── student.js
└── student.css
（1）在“students”文件夹内的index.html文件中添加以下代码：
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生信息管理系统</title>
<link rel="stylesheet" href="student.css" type="text/css">
</head>
<body>
<div id="total">
<header>
<hr/>
<h1>学生信息管理系统</h1>
<hr/>
</header>
<div id="second">
<button id="add" onclick="add()">新增</button>
<button id="del" onclick="del()">删除</button>
</div>
<div id="main">
<table cellspacing="0px" id="myTable">
<thead>
<tr>
<th class="col1"><input type="checkbox" onclick="checkAll(this)"/></th>
<th class="col2">序号</th>
<th class="col3">学号</th>
<th class="col4">姓名</th>
<th class="col5">学院</th>
<th class="col6">专业</th>
<th class="col7">年级</th>
<th class="col8">班级</th>
<th class="col9">年龄</th>
<th class="col10">操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div id="final">
<p>第</p>
<p id="pageNum">1</p>
<P>页（总共</P>
<p id="nums">0</p>
<p>条，每页最多显示10条）</p>
<button id="next" onclick="next()">下一页</button>
<button id="previous" onclick="previous()">上一页</button>
</div>
</div>
<div id="totalBackground"></div>
<div id="addBlock">
<div id="addHeader">新增学生信息</div>
<div id="addMain">
<table id="addMessageTable">
<tr>
<td class="addTableTd1">学号</td>
<td class="addTableTd2"><input type="text" id="stuId1" /></td>
</tr>
<tr>
<td class="addTableTd1">姓名</td>
<td class="addTableTd2"><input type="text" id="name1" /></td>
</tr>
<tr>
<td class="addTableTd1">学院</td>
<td class="addTableTd2"><input type="text" id="colg1" /></td>
</tr>
<tr>
<td class="addTableTd1">专业</td>
<td class="addTableTd2"><input type="text" id="profession1" /></td>
</tr>
<tr>
<td class="addTableTd1">年级</td>
<td class="addTableTd2"><input type="text" id="grade1" /></td>
</tr>
<tr>
<td class="addTableTd1">班级</td>
<td class="addTableTd2"><input type="text" id="stuClass1" /></td>
</tr>
<tr>
<td class="addTableTd1">年龄</td>
<td class="addTableTd2"><input type="text" id="age1" /></td>
</tr>
</table>
</div>
<div style="text-align: right; height: 35px; padding-top: 5px; padding-right: 20px">
<button id="submit" onclick="sumbit()">提交</button>
<button id="addCancel" onclick="addCancel()">取消</button>
</div>
</div>
<div id="updateBlock">
<div id="updateHeader">修改学生信息</div>
<div id="updateMain">
<table id="updateMessageTable">
<tr>
<td class="updateTableTd1">学号</td>
<td class="updateTableTd2"><input type="text" id="stuId2" /></td>
</tr>
<tr>
<td class="updateTableTd1">姓名</td>
<td class="updateTableTd2"><input type="text" id="name2" /></td>
</tr>
<tr>
<td class="updateTableTd1">学院</td>
<td class="updateTableTd2"><input type="text" id="colg2" /></td>
</tr>
<tr>
<td class="updateTableTd1">专业</td>
<td class="updateTableTd2"><input type="text" id="profession2" /></td>
</tr>
<tr>
<td class="updateTableTd1">年级</td>
<td class="updateTableTd2"><input type="text" id="grade2" /></td>
</tr>
<tr>
<td class="updateTableTd1">班级</td>
<td class="updateTableTd2"><input type="text" id="stuClass2" /></td>
</tr>
<tr>
<td class="updateTableTd1">年龄</td>
<td class="updateTableTd2"><input type="text" id="age2" /></td>
</tr>
</table>
</div>
<div style="text-align: right; height: 35px; padding-top: 5px; padding-right: 20px">
<button id="preservation" onclick="preservation()">保存</button>
<button id="updateCancel" onclick="updateCancel()">取消</button>
</div>
</div>
<div id="examineBlock">
<div id="examineHeader">查看学生信息</div>
<div id="examineMain">
<table id="examineMessageTable">
<tr>
<td class="examineTableTd1">学号</td>
<td class="examineTableTd2"><input type="text" id="stuId3" readonly="readonly" /></td>
</tr>
<tr>
<td class="examineTableTd1">姓名</td>
<td class="examineTableTd2"><input type="text" id="name3" readonly="readonly" /></td>
</tr>
<tr>
<td class="examineTableTd1">学院</td>
<td class="examineTableTd2"><input type="text" id="colg3" readonly="readonly" /></td>
</tr>
<tr>
<td class="examineTableTd1">专业</td>
<td class="examineTableTd2"><input type="text" id="profession3" readonly="readonly" /></td>
</tr>
<tr>
<td class="examineTableTd1">年级</td>
<td class="examineTableTd2"><input type="text" id="grade3" readonly="readonly" /></td>
</tr>
<tr>
<td class="examineTableTd1">班级</td>
<td class="examineTableTd2"><input type="text" id="stuClass3" readonly /></td>
</tr>
<tr>
<td class="examineTableTd1">年龄</td>
<td class="examineTableTd2"><input type="text" id="age3" readonly /></td>
</tr>
</table>
</div>
<div style="text-align: right; height: 35px; padding-top: 5px; padding-right: 20px">
<button id="examineCancel" onclick="examineCancel()">取消</button>
</div>
</div>
<div id="delBlock">
<div id="delHeader">待删除的学生信息</div>
<div id="delMain">
<p>您确定删除以下同学的信息</p>
<p id="delMessage"></p>
</div>
<div style="text-align: right; height: 35px; padding-top: 5px; padding-right: 20px">
<button id="confirm" onclick="confirm()">确认</button>
<button id="delCancel" onclick="delCancel()">取消</button>
</div>
</div>
<script src="student.js"></script>
</body>
</html>
（2）在“students”文件夹内的student.js文件中添加以下代码：
student.js：
// 定义对象数组，例如students[0]就是第一个对象
let students = [
{ id: "2025105801", name: "张三", academy: "经济学院", major: "经济学", grade: "2025", class: "5", age: "22" },
{ id: "2025105802", name: "李四", academy: "舞蹈学院", major: "舞蹈学", grade: "2024", class: "3", age: "20" },
{ id: "2025105803", name: "王五", academy: "工程学院", major: "软件工程", grade: "2025", class: "1", age: "20" },
{ id: "2025105804", name: "赵六", academy: "设计学院", major: "人工智能", grade: "2023", class: "4", age: "19" },
{ id: "2025105805", name: "孙七", academy: "艺术学院", major: "艺术学", grade: "2025", class: "2", age: "21" }
]
// 初始界面数据，向页面中输入tudents对象数组中每一个对象
function show() {
for (let i = 0; i < students.length; i++) {
let tab = document.getElementById("myTable")
tab.innerHTML +=
('<tr><td class="col1">' + '<input type="checkbox" name="item">' + '</td>'
+ '<td class="col2">' + (i + 1) + '</td>'
+ '<td class="col3">' + students[i].id + '</td>'
+ '<td class="col4">' + students[i].name + '</td>'
+ '<td class="col5">' + students[i].academy + '</td>'
+ '<td class="col6">' + students[i].major + '</td>'
+ '<td class="col7">' + students[i].grade + '</td>'
+ '<td class="col8">' + students[i].class + '</td>'
+ '<td class="col9">' + students[i].age + '</td>'
+ '<td class="col10"><input id="examine" type="button" value="查看" onclick="examine(this)"><input id="update" type="button" value="修改" onclick="update(this)"></td></tr>')
}
let tables = document.getElementById("myTable");
let tr = tables.rows;
// 隔行换色
for (let i = 0; i < tr.length; i++) {
let row = tr[i];
if (i % 2 == 0) {
row.className = 'mainTbodyTr1';
}
else {
row.className = 'mainTbodyTr2';
}
}
// 统计学生信息数量
let nums = tr.length;
document.getElementById('nums').innerText = nums - 1;
};
show();
// 新增按钮
function add() {
// 打开“新增”窗口
document.getElementById('addBlock').style.display = 'block';
document.getElementById('totalBackground').style.display = 'block';
}
// 提交按钮
function sumbit() {
// 关闭“新增”窗口
document.getElementById('addBlock').style.display = 'none';
document.getElementById('totalBackground').style.display = 'none';
// 写入表单
// 获取表
let iTable = document.getElementById('myTable');
// 获取输入值
let stuId = document.getElementById('stuId1').value;
let name = document.getElementById('name1').value;
let colg = document.getElementById('colg1').value;
let profession = document.getElementById('profession1').value;
let grade = document.getElementById('grade1').value;
let stuClass = document.getElementById('stuClass1').value;
let age = document.getElementById('age1').value;
let nums = iTable.rows.length;
// 判断输入的各数据是否为空
if(stuId.trim() === ''){
alert('学号不能为空');
return false;
}
if(name.trim() === ''){
alert('姓名不能为空');
return false;
}
if(colg.trim() === ''){
alert('学院不能为空');
return false;
}
if(profession.trim() === ''){
alert('专业不能为空');
return false;
}
if(grade.trim() === ''){
alert('年级不能为空');
return false;
}
if(stuClass.trim() === ''){
alert('班级不能为空');
return false;
}
if(age.trim() === ''){
alert('年龄不能为空');
return false;
}
// 创建一行tr
let iTr = document.createElement('tr');
// 隔行换色
if (nums % 2 != 0)
{
iTr.className = 'mainTbodyTr1';
}
else {
iTr.className = 'mainTbodyTr2';
}
// 将tr添加到table中
iTable.appendChild(iTr);
// 创建选择按钮
let sel = document.createElement('input');
sel.setAttribute('type','checkbox');
sel.setAttribute('name','item');
// 创建单元格td，并添加属性、内容
let iTd1 = document.createElement('td');
iTd1.className = "col1";
iTd1.appendChild(sel);
let iTd2 = document.createElement('td');
iTd2.className = "col2";
iTd2.appendChild(document.createTextNode(nums));
let iTd3 = document.createElement('td');
iTd3.className = "col3";
iTd3.appendChild(document.createTextNode(stuId));
let iTd4 = document.createElement('td');
iTd4.className = "col4";
iTd4.appendChild(document.createTextNode(name));
let iTd5 = document.createElement('td');
iTd5.className = "col5";
iTd5.appendChild(document.createTextNode(colg));
let iTd6 = document.createElement('td');
iTd6.className = "col6";
iTd6.appendChild(document.createTextNode(profession));
let iTd7 = document.createElement('td');
iTd7.className = "col7";
iTd7.appendChild(document.createTextNode(grade));
let iTd8 = document.createElement('td');
iTd8.className = "col8";
iTd8.appendChild(document.createTextNode(stuClass));
let iTd9 = document.createElement('td');
iTd9.className = "col9";
iTd9.appendChild(document.createTextNode(age));
let iTd10 = document.createElement('td');
iTd10.className = "col10";
let examine = document.createElement('input');
examine.id = 'examine';
examine.setAttribute('type','button');
examine.setAttribute('value','查看');
examine.setAttribute('onclick','examine(this)');
let update = document.createElement('input');
update.id = 'update';
update.setAttribute('type','button');
update.setAttribute('value','修改');
update.setAttribute('onclick','update(this)');
iTd10.appendChild(examine);
iTd10.appendChild(update);
// 将单元格添加到行
iTr.appendChild(iTd1);
iTr.appendChild(iTd2);
iTr.appendChild(iTd3);
iTr.appendChild(iTd4);
iTr.appendChild(iTd5);
iTr.appendChild(iTd6);
iTr.appendChild(iTd7);
iTr.appendChild(iTd8);
iTr.appendChild(iTd9);
iTr.appendChild(iTd10);
// 将新增窗口中的输入框值初始化
document.getElementById('stuId1').value = null;
document.getElementById('name1').value = null;
document.getElementById('colg1').value = null;
document.getElementById('profession1').value = null;
document.getElementById('grade1').value = null;
document.getElementById('stuClass1').value = null;
document.getElementById('age1').value = null;
// 统计学生信息数量
document.getElementById('nums').innerText = nums;
let pageNum = document.getElementById('pageNum').innerText;
pageNum = parseInt(pageNum);
for (let i=10*pageNum+1; i<=nums; i++) {
iTable.rows[i].style.display = 'none';
}
// 关闭“新增”窗口
document.getElementById('addBlock').style.display = 'none';
}
// “新增”中的取消按钮
function addCancel() {
// 关闭“新增”窗口
document.getElementById('addBlock').style.display = 'none';
document.getElementById('totalBackground').style.display = 'none';
}
// 全选设置
function checkAll(obj){
let status = obj.checked;
let items = document.getElementsByName('item');
let pageNum = document.getElementById('pageNum').innerText;
pageNum = parseInt(pageNum);
for (let i=(pageNum-1)*10; i<pageNum*10; i++) {
items[i].checked=status;
}
}
// “删除”按钮
function del() {
// 打开“删除”窗口
document.getElementById('delBlock').style.display = 'block';
document.getElementById('totalBackground').style.display = 'block';
// 获取复选框信息
let items = document.getElementsByName('item');
let message = [];
let checkedCount = document.querySelectorAll('input[name="item"]:checked').length;
// 如果复选框都没有被选中，则输出提示信息
if(checkedCount == 0){
window.alert('请选择要删除的学生信息');
document.getElementById('delBlock').style.display = 'none';
document.getElementById('totalBackground').style.display = 'none';
}
// 遍历被选中的复选框
for(let j=0;j<items.length;j++){
if(items[j].checked) //如果item被选中
{
let m = items[j].parentNode.parentNode.cells[3].innerText;
message.push(m);
}
}
// 提示是否删除学生信息
let delNode = document.getElementById('delMessage');
delNode.innerText = message.join('，');
}
// “删除”窗口中的“确认”按钮
function confirm() {
// 关闭“删除”窗口
document.getElementById('delBlock').style.display = 'none';
document.getElementById('totalBackground').style.display = 'none';
// 获取被选中的学生信息并删除
let items = document.getElementsByName('item');
let items_num = 0;
for(let j=0;j<items.length;j++){
if(items[j].checked)//如果item被选中
{
items_num += 1;
items[j].parentNode.parentNode.remove();
j--;
}
}
// 隔行换色
let iTable = document.getElementById('myTable');
let iTrs = iTable.getElementsByTagName('tr');
for (let i=1; i<iTrs.length; i++) {
if (i % 2 != 0)
iTrs[i].className = 'mainTbodyTr1';
else
iTrs[i].className = 'mainTbodyTr2';
let sort = iTrs[i].getElementsByTagName('td')[1];
sort.innerText = i;
}
let nums = iTrs.length - 1;
document.getElementById('nums').innerText = nums;
nums = parseInt(nums);
let pageSum = Math.ceil(nums / 10);
let pageNum = document.getElementById('pageNum').innerText;
pageNum = parseInt(pageNum);
if (pageNum <= pageSum) {
for (let i=(pageNum-1)*10+1; i<pageNum*10+1; i++) {
iTable.rows[i].style.display = 'table-row';
}
for (let i=1; i<(pageNum-1)*10+1; i++) {
iTable.rows[i].style.display = 'none';
}
for (let i=pageNum*10+1; i<nums+1; i++) {
iTable.rows[i].style.display = 'none';
}
}
if (pageNum > pageSum) {
for (let i=(pageNum-2)*10+1; i<nums+1; i++) {
iTable.rows[i].style.display = 'table-row';
}
for (let i=1; i<(pageNum-2)*10+1; i++) {
iTable.rows[i].style.display = 'none';
}
document.getElementById('pageNum').innerText = pageNum - 1;
}
}
// “删除”窗口中的“取消”按钮
function delCancel() {
// 关闭“删除”窗口
document.getElementById('delBlock').style.display = 'none';
document.getElementById('totalBackground').style.display = 'none';
}
// “查看”按钮
function examine(obj) {
// 打开“查看”窗口
document.getElementById('examineBlock').style.display = 'block';
document.getElementById('totalBackground').style.display = 'block';
// 获取当前行
let iTr = obj.parentNode.parentNode;
// 获取当前行中的所有单元格
let iTds = iTr.getElementsByTagName('td');
// 将“新增”窗口中的输入框中内容设为当前行对应的内容
document.getElementById('stuId3').value = iTds[2].innerText;
document.getElementById('name3').value = iTds[3].innerText;
document.getElementById('colg3').value = iTds[4].innerText;
document.getElementById('profession3').value = iTds[5].innerText;
document.getElementById('grade3').value = iTds[6].innerText;
document.getElementById('stuClass3').value = iTds[7].innerText;
document.getElementById('age3').value = iTds[8].innerText;
}
// “查看”中的取消按钮
function examineCancel() {
// 关闭“修改”窗口
document.getElementById('examineBlock').style.display = 'none';
document.getElementById('totalBackground').style.display = 'none';
}
// “上一页”按钮
function previous() {
let iTable = document.getElementById('myTable');
let pageNum = document.getElementById('pageNum').innerText;
pageNum = parseInt(pageNum);
if (pageNum == 1) {
window.alert('当前为第一页，无法先前翻页')
}
if (pageNum > 1)
{
document.getElementById('pageNum').innerText = pageNum - 1;
for (let i=(pageNum-2)*10+1; i<(pageNum-1)*10+1; i++) {
iTable.rows[i].style.display = 'table-row';
}
for (let i=(pageNum-1)*10+1; i<pageNum*10+1; i++) {
iTable.rows[i].style.display = 'none';
}
}
}
// “下一页”按钮
function next() {
let iTable = document.getElementById('myTable');
let pageSum = Math.ceil((iTable.rows.length-1) / 10);
let pageNum = document.getElementById('pageNum').innerText;
pageNum = parseInt(pageNum);
if (pageNum < pageSum) {
document.getElementById('pageNum').innerText = pageNum + 1;
for (let i=(pageNum-1)*10+1; i<pageNum*10+1; i++) {
iTable.rows[i].style.display = 'none';
}
for (let i=pageNum*10+1; i<(pageNum+1)*10+1; i++) {
iTable.rows[i].style.display = 'table-row';
}
}
else {
window.alert('当前为最后一页，无法向后翻页')
}
}
// “修改”按钮
function update(obj) {
// 打开“修改”窗口
document.getElementById('updateBlock').style.display = 'block';
document.getElementById('totalBackground').style.display = 'block';
// 获取当前行
let iTr = obj.parentNode.parentNode;
// 获取当前行中的所有单元格
iTds = iTr.getElementsByTagName('td');
// 将“新增”窗口中的输入框中内容设为当前行对应的内容
document.getElementById('stuId2').value = iTds[2].innerText;
document.getElementById('name2').value = iTds[3].innerText;
document.getElementById('colg2').value = iTds[4].innerText;
document.getElementById('profession2').value = iTds[5].innerText;
document.getElementById('grade2').value = iTds[6].innerText;
document.getElementById('stuClass2').value = iTds[7].innerText;
document.getElementById('age2').value = iTds[8].innerText;
}
// “保存”按钮
function preservation() {
// 将新内容写入
stuId2 = document.getElementById('stuId2').value;
name2 = document.getElementById('name2').value;
colg2 = document.getElementById('colg2').value;
profession2 = document.getElementById('profession2').value;
grade2 = document.getElementById('grade2').value;
stuClass2 = document.getElementById('stuClass2').value;
age2 = document.getElementById('age2').value;
// 判断输入的各数据是否为空
if(stuId2.trim() === ''){
alert('学号不能为空');
return false;
}
if(name2.trim() === ''){
alert('姓名不能为空');
return false;
}
if(colg2.trim() === ''){
alert('学院不能为空');
return false;
}
if(profession2.trim() === ''){
alert('专业不能为空');
return false;
}
if(grade2.trim() === ''){
alert('年级不能为空');
return false;
}
if(stuClass2.trim() === ''){
alert('班级不能为空');
return false;
}
if(age2.trim() === ''){
alert('年龄不能为空');
return false;
}
// 将新内容写入
iTds[2].innerText = stuId2;
iTds[3].innerText = name2;
iTds[4].innerText = colg2;
iTds[5].innerText = profession2;
iTds[6].innerText = grade2;
iTds[7].innerText = stuClass2;
iTds[8].innerText = age2;
// 关闭“修改”窗口
document.getElementById('updateBlock').style.display = 'none';
document.getElementById('totalBackground').style.display = 'none';
}
// “修改”中的“取消”按钮
function updateCancel() {
// 关闭“修改”窗口
document.getElementById('updateBlock').style.display = 'none';
document.getElementById('totalBackground').style.display = 'none';
}
（3）在“students”文件夹内的student.css文件中添加以下代码：
student.css：
body {
background-color: #f0ece9;
}
/*总*/
#total
{
width: 1200px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
/*第一行（学生管理系统那一行）*/
header {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
header h1 {
color: #9a9897;
margin: 0;
padding: 0;
}
header hr {
margin: 20px 20px 0;
background-color: #bc9470;
border: 2px solid #bc9470;
width: 30%;
height: 0;
}
/*第二行（按钮那一行）*/
#second
{
text-align: left;
margin-left: 70px
}
/*第三行（主体）*/
#main
{
border: 1px solid #a6a9ab;
}
/*表头*/
#main thead
{
text-align: center;
}
#main thead tr
{
background-color: #dadee1;
height: 40px;
}
/*表主体*/
.mainTbodyTr1
{
height: 30px;
background-color: white;
text-align: center;
}
.mainTbodyTr2
{
height: 30px;
background-color: #eef1f8;
text-align: center;
}
/*第一列*/
.col1
{
width: 50px;
}
/*第二列*/
.col2
{
width: 60px;
}
/*第三列*/
.col3
{
width: 180px;
}
/*第四列*/
.col4
{
width: 180px;
}
/*第五列*/
.col5
{
width: 180px;
}
/*第六列*/
.col6
{
width: 180px;
}
/*第七列*/
.col7
{
width: 80px;
}
/*第八列*/
.col8
{
width: 80px;
}
/*第九列*/
.col9
{
width: 80px;
}
/*第十列*/
.col10
{
width: 130px;
}
#final
{
margin-top: 15px;
height: 40px;
}
#final p
{
display: inline;
}
#totalBackground{
width: 100%;
height: 100%;
/*border: 1px solid #dadee1;*/
display: none;
position: absolute;
top: 0;
left: 0;
background-color: #c4c2c1;
z-index:1;
/*-moz-opacity: 0.8;*/
opacity:.8;
/*filter: alpha(opacity=88);*/
}
/*新增框架*/
#addBlock
{
width: 420px;
height: 400px;
display: none;
position: absolute;
top: 15%;
left: 35%;
background-color: white;
border-radius: 5px;
z-index:2;
/*overflow: auto;*/
}
/*新增框架头*/
#addHeader
{
background-color: black;
color: white;
font-family: 黑体;
font-weight: bold;
height: 30px;
padding-left: 10px;
padding-top: 10px;
/*display: table-row;*/
}
/*新增框架主体*/
#addMain
{
height: 290px;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #dadee1;
}
#addMain table
{
width: 400px;
}
#addMain tr
{
height: 40px;
}
.addTableTd1
{
padding-left: 15px;
width: 120px;
text-align: right;
}
.addTableTd2
{
padding-left: 20px;
width: 250px;
text-align: left;
}
.addTableTd2 input
{
width: 150px;
}
#add /*新增*/
{
height: 30px;
width: 75px;
background-color: #5cb85c;
color: white;
border: 1px solid black;
margin:20px 5px;
}
#del /*删除*/
{
height: 30px;
width: 75px;
background-color: #d9534f;
color: white;
border: 1px solid black;
margin-left: 5px;
}
#previous /*上一页*/
{
height: 30px;
width: 75px;
background-color: #5cb85c;
color: white;
border: 1px solid black;
float: right;
}
#next /*下一页*/
{
height: 30px;
width: 75px;
background-color: #d9534f;
color: white;
border: 1px solid black;
margin-left: 10px;
float: right;
}
#examine /*查看*/
{
font-size: 16px;
height: 20px;
border: none;
color: red;
background: none;
/*background-color: #eef1f8;*/
}
#update /*修改*/
{
font-size: 16px;
height: 20px;
border: none;
color: red;
background: none;
/*background-color: #eef1f8;*/
}
#submit /*提交*/
{
height: 30px;
width: 75px;
background-color: #5cb85c;
color: black;
border: 1px solid #dadee1;
}
#addCancel /*新增中的取消*/
{
height: 30px;
width: 75px;
background-color: white;
color: black;
border: 1px solid #dadee1;
margin-left: 5px;
}
#preservation /*保存*/
{
height: 30px;
width: 75px;
background-color: #5cb85c;
color: black;
border: 1px solid #dadee1;
}
#updateCancel /*修改中的取消*/
{
height: 30px;
width: 75px;
background-color: white;
color: black;
border: 1px solid #dadee1;
margin-left: 5px;
}
#examineCancel /*修改中的取消*/
{
height: 30px;
width: 75px;
background-color: white;
color: black;
border: 1px solid #dadee1;
/*margin-left: 5px;*/
}
#confirm /*确认*/
{
height: 30px;
width: 75px;
background-color: #5cb85c;
color: black;
border: 1px solid #dadee1;
}
#delCancel /*删除中的取消*/
{
height: 30px;
width: 75px;
background-color: white;
color: black;
border: 1px solid #dadee1;
margin-left: 5px;
}
/*删除框架*/
#delBlock
{
width: 420px;
height: 400px;
display: none;
position: absolute;
top: 15%;
left: 35%;
background-color: white;
border-radius: 5px;
z-index:2;
/*overflow: auto;*/
}
/*新增框架头*/
#delHeader
{
background-color: black;
color: white;
font-family: 黑体;
font-weight: bold;
height: 30px;
padding-left: 10px;
padding-top: 10px;
}
/*新增框架主体*/
#delMain
{
height: 280px;
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #dadee1;
}
#delMain p
{
font-size: 20px;
}
#delMessage
{
font-size: 20px;
}
/*查看框架*/
#examineBlock
{
width: 420px;
height: 400px;
display: none;
position: absolute;
top: 15%;
left: 35%;
background-color: white;
border-radius: 5px;
z-index:2;
/*overflow: auto;*/
}
/*新增框架头*/
#examineHeader
{
background-color: black;
color: white;
font-family: 黑体;
font-weight: bold;
height: 30px;
padding-left: 10px;
padding-top: 10px;
}
/*新增框架主体*/
#examineMain
{
height: 290px;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #dadee1;
}
#examineMain table
{
width: 400px;
}
#examineMain tr
{
height: 40px;
}
.examineTableTd1
{
padding-left: 15px;
width: 120px;
text-align: right;
}
.examineTableTd2
{
padding-left: 20px;
width: 250px;
text-align: left;
}
.examineTableTd2 input
{
color: #545454;
width: 150px;
background-color: #ebebe4;
border: 1px solid #a9a9a9;
}
/*修改框架*/
#updateBlock
{
width: 420px;
height: 400px;
display: none;
position: absolute;
top: 15%;
left: 35%;
background-color: white;
border-radius: 5px;
z-index:2;
/*overflow: auto;*/
}
/*新增框架头*/
#updateHeader
{
background-color: black;
color: white;
font-family: 黑体;
font-weight: bold;
height: 30px;
padding-left: 10px;
padding-top: 10px;
}
/*新增框架主体*/
#updateMain
{
height: 290px;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #dadee1;
}
#updateMain table
{
width: 400px;
}
#updateMain tr
{
height: 40px;
}
.updateTableTd1
{
padding-left: 15px;
width: 120px;
text-align: right;
}
.updateTableTd2
{
padding-left: 20px;
width: 250px;
text-align: left;
}
.updateTableTd2 input
{
width: 150px;
}
最后，我们通过浏览器运行以上文件。鼠标右键点击index.html文件后，选择打开方式为“Microsoft Edge”或者其它任意浏览器，就可以打开学生信息管理系统。
3、学生信息管理系统解析
实例中的“学生信息管理系统”主要通过外部单独新建一个student.js文件，再通过<script>标签把JavaScript代码引入到index.html文件中。
（1）getElementById()用法
在学生信息管理系统的student.js文件中，JavaScript主要通过document.getElementById()方法获取index.html文件中指定ID的标签。document.getElementById()方法主要用于通过标签的ID获取该标签的引用，然后可以对标签进行各种操作。HTML文档中每个标签的ID必须是唯一的，如果一个HTML文档中有两个及以上的标签具有相同的ID，那么document.getElementById()方法只会返回查找到的第一个标签。例如：
动手练一练：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementById()代码示例</title>
<script>
function changeColor(newColor) {
const part = document.getElementById("test");
// 修改标签的样式
part.style.color = newColor;
}
function changeText(newtext) {
const part = document.getElementById("test");
// 修改标签的内容
part.innerHTML = newtext;
}
</script>
</head>
<body>
<p id="test">这里有一些文本</p>
<!--下面标签中包含相同的ID，不会被引用操作-->
<p id="test">这里另一个文本内容</p>
<button onclick="changeColor('green');">绿色</button>
<button onclick="changeColor('red');">红色</button>
<button onclick="changeText('这是新的文本');">修改文本内容</button>
</body>
</html>
上面的例子中，通过JavaScript中的onclick事件，处理用户点击button标签的行为。当用户在指定的button标签上点击时，onclick事件会被触发，并调用changeColor()函数或者changeText()函数。changeColor()函数通过getElementById().style.color方法编辑HTML标签的文本的颜色，changeText()函数通过getElementById().innerHTML方法编辑HTML标签的内容。
getElementById().innerHTML方法可以获取或设置指定标签内的HTML内容，包括从标签标记开始到标签标记结束的所有内容，包括HTML标记。在JavaScript中，getElementById().innerText方法同样可以获取或设置指定标签内的HTML内容，但是只能获取或设置文本的值，不包括HTML标记。例如：
动手练一练：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>innerHTML和innerText对比示例</title>
</head>
<body>
<div id="test">
hello <strong>world</strong>
</div>
<script>
// 输出 hello <strong>world</strong>
console.log(document.getElementById('test').innerHTML)
</script>
<script>
// 输出 hello world
console.log(document.getElementById('test').innerText)
</script>
</body>
</html>
通过浏览器执行以上代码，我们按F12键打开浏览器的控制台，可以看到输出结果为：
hello <strong>world</strong>
hello world
上面的例子中，当我们尝试用innerHTML获取内容时，内容包含strong标签，所以输出的内容会显示strong标签。当我们用innerText获取内容时，只能获取文本的值为“hello world”，不包括strong标签。
（2）appendChild()用法
在学生信息管理系统的student.js文件中，JavaScript主要通过appendChild()方法模拟数据库操作，动态地向表格中添加新的数据行。appendChild()方法是JavaScript中一种常用的操作，可以用于动态地向网页中添加标签元素，实现动态内容的更新和交互效果，比如，我们需要从服务器获取数据并显示在表格中。
appendChild()方法可以向指定的父节点中（父标签元素）添加一个子节点（子标签元素）。其基本语法如下：
parentNode.appendChild(childNode);
其中，parentNode是要添加子节点的父节点，childNode是要添加的子节点。
在下面示例中，我们新建两个不同颜色的盒子和一个按钮，使用CSS的style属性设计两个盒子的边框颜色分别为红色和蓝色，然后为按钮绑定事件处理函数，当点击按钮时执行appendChild()方法操作。
动手练一练：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>appendChild()方法示例</title>
</head>
<body>
<div id="red" style="border: 1px solid #ff0000; padding: 20px; margin: 20px;">红盒子</div>
<div id="blue" style="border: 1px solid #1c77ff; padding: 20px; margin: 20px;">蓝盒子</div>
<button id="move">移动</button>
<script>
// 获取按钮标签的引用
let moving = document.getElementById("move");
// 为按钮绑定一个鼠标单击事件的处理函数
moving.onclick = function () {
// 获取红色盒子的引用
let reds = document.getElementById("red");
// 获取蓝色盒子的引用
let blues= document.getElementById("blue");
//最后移动红色盒子到蓝色盒子中
blues.appendChild(reds);
}
</script>
</body>
</html>
上面的例子中，通过appendChild()方法把红盒子移动到蓝色盒子中间。在移动指定节点时，会同时移动指定节点包含的所有子节点，效果如图所示：
在用户交互场景中，当用户执行某些操作（如添加记录）时，appendChild()方法可以及时更新表格内容。以下是一个简单的示例，展示如何通过appendChild()方法向表格添加新行：
动手练一练：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>appendChild()方法向表格添加新行</title>
<style>
/* 为表格添加样式 */
table, th, td {
border-width: 1px;
border-style: solid;
border-color: #000000;
margin: 20px;
}
</style>
</head>
<body>
<table id="myTable">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
</tr>
</table>
<button onclick="addRow()">添加新行</button>
<script>
function addRow() {
// 获取表格元素
let table = document.getElementById("myTable");
// 创建新行
let newRow = document.createElement("tr");
// 创建新单元格
let cell1 = document.createElement("td");
let cell2 = document.createElement("td");
// 设置单元格内容
cell1.innerHTML = "李四";
cell2.innerHTML = "25";
// 将单元格添加到新行
newRow.appendChild(cell1);
newRow.appendChild(cell2);
// 将新行添加到表格
table.appendChild(newRow);
}
</script>
</body>
</html>
效果如下图所示：
上面的例子中，一旦点击“添加新行”按钮，新行就会被添加到表格中，浏览器也会自动刷新表格的显示，以包含新插入的行。
appendChild()方法是JavaScript中用于将标签元素添加到父节点的子节点列表的末尾的重要方法。通过理解其工作原理，我们可以更有效地使用它来动态创建和修改表格。