HTML+JS+CSS实现学生信息管理系统

HTML+JS+CSS实现学生信息管理系统

HTML+JS+CSS实现学生信息管理系统

效果

话不多说,直接看效果,本次代码较为复杂,希望大家可以耐心阅读。
完整代码也可以在我的GitHub中找到,

页面

www.zeeklog.com  - HTML+JS+CSS实现学生信息管理系统

点击新增按钮,弹出如下 新增学生信息 输入框架,输入内容,点击提交,回到初始页面,并将内容写入表格中;点击取消,直接回到初始页面,效果如下所示

www.zeeklog.com  - HTML+JS+CSS实现学生信息管理系统


当增加数据条数超过初始页面选择的显示条数(10条),再次增加,在第一页时,不再继续显示,点击下一页,再增加,可继续显示添加内容,效果如下所示

www.zeeklog.com  - HTML+JS+CSS实现学生信息管理系统

选择每一行最前面的方框,再点击删除,弹出如下 待删除的学生信息 框架,点击确定按钮,删除选定的行,并且后面的行会自动补上去,序号列也会自动变换;点击取消,直接回到初始页面,效果如下所示

www.zeeklog.com  - HTML+JS+CSS实现学生信息管理系统


点击标题行上的方框,就可就该页的十条数据全部选定,点击删除,即可删除该页的所有数据,效果如下所示

www.zeeklog.com  - HTML+JS+CSS实现学生信息管理系统

点击每一行最后的修改按钮,弹出如下 修改学生信息 框架,点击保存按钮,将该行的原本数据替换为修改后的数据;点击取消,直接回到初始页面,效果如下所示

www.zeeklog.com  - HTML+JS+CSS实现学生信息管理系统

点击每一行最后的查看按钮,弹出如下 查看学生信息 框架,此时的数据不可改,仅仅允许查看,点击取消,回到初始页面,效果如下所示

www.zeeklog.com  - HTML+JS+CSS实现学生信息管理系统

翻页

在首页时,点击上一页按钮,弹出提示 当前为第一页,无法先前翻页
在尾页时,点击下一页按钮,弹出提示 当前为最后一页,无法向后翻页
可以进行正常的翻页,效果如下所示

www.zeeklog.com  - HTML+JS+CSS实现学生信息管理系统

代码

此处只展示部分 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,则有以下规则

  1. 当前页的开始条数为(page-1)*10+1,例如在第1页时,开始条数为(1-1)*10+1 = 1;在第二页时,开始条数为(2-1)*10+1 = 11
  2. 当前页的结束条数为page*10,例如在第1页时,结束条数为1*10 = 10;在第二页时,结束条数为2*10 = 20

如此,就可以做到仅仅全选当前页所有数据。

难点3

删除后,需要补齐。
问题:删除后,该页是否还有数据,是否需要跳页
可以获取删除后的总行数,设总行数为rows,有以下规则

  1. rows除10,向上取整,则可以得到,一共有多少页,设总页数为sumpages
  2. 当前页数page大于总页数sumpages时,则表示,现在的数据已经少于当前页数page应有的数据量,则需要进行跳页,即跳转到上一页
  3. 当前页数page小于总页数sumpages时,则表示,现在的数据支持当前页数page应有的数据量,则只需要继续显示该页面的数据即可

难点4

翻页,判断首页或者尾页。

首页,简单,只需拿取当前页的数据page,如果page == 1,则表示在首页;
尾页,难点3当中已经讲到解决方法,即如果page == sumpages,则表示在尾页。

结语

最终,望您学业有成、事业有成,谢谢!