HTML+JS+CSS实现学生信息管理系统
HTML+JS+CSS实现学生信息管理系统
效果
话不多说,直接看效果,本次代码较为复杂,希望大家可以耐心阅读。
完整代码也可以在我的GitHub中找到,
页面
增
点击新增按钮,弹出如下 新增学生信息 输入框架,输入内容,点击提交,回到初始页面,并将内容写入表格中;点击取消,直接回到初始页面,效果如下所示
当增加数据条数超过初始页面选择的显示条数(10条),再次增加,在第一页时,不再继续显示,点击下一页,再增加,可继续显示添加内容,效果如下所示
删
选择每一行最前面的方框,再点击删除,弹出如下 待删除的学生信息 框架,点击确定按钮,删除选定的行,并且后面的行会自动补上去,序号列也会自动变换;点击取消,直接回到初始页面,效果如下所示
点击标题行上的方框,就可就该页的十条数据全部选定,点击删除,即可删除该页的所有数据,效果如下所示
改
点击每一行最后的修改按钮,弹出如下 修改学生信息 框架,点击保存按钮,将该行的原本数据替换为修改后的数据;点击取消,直接回到初始页面,效果如下所示
查
点击每一行最后的查看按钮,弹出如下 查看学生信息 框架,此时的数据不可改,仅仅允许查看,点击取消,回到初始页面,效果如下所示
翻页
在首页时,点击上一页按钮,弹出提示 当前为第一页,无法先前翻页
在尾页时,点击下一页按钮,弹出提示 当前为最后一页,无法向后翻页
可以进行正常的翻页,效果如下所示
代码
此处只展示部分 JavaScript 代码,完整代码可在我的GitHub中自行提取,
数据增加——add.js:
// 新增按钮
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';
// 写入表单
// 获取表
var iTable = document.getElementById('myTable');
// 获取输入值
var stuId = document.getElementById('stuId1').value;
var name = document.getElementById('name1').value;
var colg = document.getElementById('colg1').value;
var profession = document.getElementById('profession1').value;
var grade = document.getElementById('grade1').value;
var stuClass = document.getElementById('stuClass1').value;
var age = document.getElementById('age1').value;
var nums = iTable.rows.length;
// 创建一行tr
var iTr = document.createElement('tr');
// 隔行换色
if (nums % 2 != 0)
{
iTr.className = 'mainTbodyTr1';
}
else {
iTr.className = 'mainTbodyTr2';
}
// 将tr添加到table中
iTable.appendChild(iTr);
// 创建选择按钮
var sel = document.createElement('input');
sel.setAttribute('type','checkbox');
sel.setAttribute('name','item');
// 创建单元格td,并添加属性、内容
var iTd1 = document.createElement('td');
iTd1.className = "col1";
iTd1.appendChild(sel);
var iTd2 = document.createElement('td');
iTd2.className = "col2";
iTd2.appendChild(document.createTextNode(nums));
var iTd3 = document.createElement('td');
iTd3.className = "col3";
iTd3.appendChild(document.createTextNode(stuId));
var iTd4 = document.createElement('td');
iTd4.className = "col4";
iTd4.appendChild(document.createTextNode(name));
var iTd5 = document.createElement('td');
iTd5.className = "col5";
iTd5.appendChild(document.createTextNode(colg));
var iTd6 = document.createElement('td');
iTd6.className = "col6";
iTd6.appendChild(document.createTextNode(profession));
var iTd7 = document.createElement('td');
iTd7.className = "col7";
iTd7.appendChild(document.createTextNode(grade));
var iTd8 = document.createElement('td');
iTd8.className = "col8";
iTd8.appendChild(document.createTextNode(stuClass));
var iTd9 = document.createElement('td');
iTd9.className = "col9";
iTd9.appendChild(document.createTextNode(age));
var iTd10 = document.createElement('td');
iTd10.className = "col10";
var examine = document.createElement('input');
examine.id = 'examine';
examine.setAttribute('type','button');
examine.setAttribute('value','查看');
examine.setAttribute('onclick','examine(this)');
var 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;
var pageNum = document.getElementById('pageNum').innerText;
pageNum = parseInt(pageNum);
for (var i=10*pageNum+1; i<=nums; i++) {
iTable.rows[i].style.display = 'none';
}
}
// 新增中的取消按钮
function addCancel() {
// 关闭新增框架
document.getElementById('addBlock').style.display = 'none';
document.getElementById('totalBackground').style.display = 'none';
}
数据删除——del.js:
// 全选
function checkAll(obj){
var status = obj.checked;
var items = document.getElementsByName('item');
var pageNum = document.getElementById('pageNum').innerText;
pageNum = parseInt(pageNum);
for (var 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';
var items = document.getElementsByName('item');
var message = [];
for(var j=0;j<items.length;j++){
if(items[j].checked) //如果item被选中
{
var m = items[j].parentNode.parentNode.cells[3].innerText;
message.push(m);
}
}
var delNode = document.getElementById('delMessage');
delNode.innerText = message.join('\t');
}
// 确认按钮
function confirm() {
// 关闭删除框架
document.getElementById('delBlock').style.display = 'none';
document.getElementById('totalBackground').style.display = 'none';
var items = document.getElementsByName('item');
var items_num = 0;
for(var j=0;j<items.length;j++){
if(items[j].checked)//如果item被选中
{
items_num += 1;
items[j].parentNode.parentNode.remove();
j--;
}
}
var iTable = document.getElementById('myTable');
var iTrs = iTable.getElementsByTagName('tr');
for (var i=1; i<iTrs.length; i++) {
if (i % 2 != 0)
iTrs[i].className = 'mainTbodyTr1';
else
iTrs[i].className = 'mainTbodyTr2';
var sort = iTrs[i].getElementsByTagName('td')[1];
sort.innerText = i;
}
var nums = iTrs.length - 1;
document.getElementById('nums').innerText = nums;
nums = parseInt(nums);
var pageSum = Math.ceil(nums / 10);
var pageNum = document.getElementById('pageNum').innerText;
pageNum = parseInt(pageNum);
if (pageNum <= pageSum) {
for (var i=(pageNum-1)*10+1; i<pageNum*10+1; i++) {
iTable.rows[i].style.display = 'table-row';
}
for (var i=1; i<(pageNum-1)*10+1; i++) {
iTable.rows[i].style.display = 'none';
}
for (var i=pageNum*10+1; i<nums+1; i++) {
iTable.rows[i].style.display = 'none';
}
}
if (pageNum > pageSum) {
for (var i=(pageNum-2)*10+1; i<nums+1; i++) {
iTable.rows[i].style.display = 'table-row';
}
for (var 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';
}
难点
难点1
如何将输入框中的数据,写入表格。
问题1:获取输入数据
var stuId = document.getElementById('stuId1').value;
var name = document.getElementById('name1').value;
通过document.getElementById('object').value
获取输入框中的数据
问题2:将数据写入表格
var iTr = document.createElement('tr');
创建 tr 标签,即创建行
var iTd1 = document.createElement('td');
iTd1.className = "col1";
iTd1.appendChild(sel);
创建 td 标签,即创建单元格,并将数据加入单元格
iTable.appendChild(iTr);
iTr.appendChild(iTd1);
将行添加到表,将单元格添加到行
难点2
全选,如何只选当前页的所有数据。
问题1:全选
<input type="checkbox" onclick="checkAll(this)"/>
它有一个checked
属性,可以判断它是否被选择。
点击这个<input>
,将这一页的这一列,全部保持相同的checked
属性,即可做出全选。
问题2:仅选择当前页
首先需要拿到当前页面,然后,由于每一页设定只显示10条内容,设当前页面数为page
,则有以下规则
- 当前页的开始条数为
(page-1)*10+1
,例如在第1页时,开始条数为(1-1)*10+1 = 1
;在第二页时,开始条数为(2-1)*10+1 = 11
- 当前页的结束条数为
page*10
,例如在第1页时,结束条数为1*10 = 10
;在第二页时,结束条数为2*10 = 20
如此,就可以做到仅仅全选当前页所有数据。
难点3
删除后,需要补齐。
问题:删除后,该页是否还有数据,是否需要跳页
可以获取删除后的总行数,设总行数为rows
,有以下规则
rows
除10,向上取整,则可以得到,一共有多少页,设总页数为sumpages
- 当前页数
page
大于总页数sumpages
时,则表示,现在的数据已经少于当前页数page
应有的数据量,则需要进行跳页,即跳转到上一页 - 当前页数
page
小于总页数sumpages
时,则表示,现在的数据支持当前页数page
应有的数据量,则只需要继续显示该页面的数据即可
难点4
翻页,判断首页或者尾页。
首页,简单,只需拿取当前页的数据page
,如果page == 1
,则表示在首页;
尾页,难点3当中已经讲到解决方法,即如果page == sumpages
,则表示在尾页。
结语
最终,望您学业有成、事业有成,谢谢!