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

• 效果
• 页面
• 增
• 删
• 改
• 查
• 翻页
• 代码
• 难点
• 难点1
• 难点2
• 难点3
• 难点4
• 结语

效果

话不多说，直接看效果，本次代码较为复杂，希望大家可以耐心阅读，不懂的可以评论或者邮箱联系我（1079349989@qq.com）。
完整代码也可以在我的GitHub中找到，GitHub链接在此

页面

增

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

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

删

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

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

改

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

查

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

翻页

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

代码

此处只展示部分 JavaScript 代码，完整代码可在我的GitHub中自行提取，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，则表示在尾页。

结语

代码中都写有注释，希望你能耐心阅读，如还有不理解的地方，可以通过评论或邮箱联系我（1079349989@qq.com）。

最终，望您学业有成、事业有成，谢谢！

• 点赞
• 收藏
• 分享
• • 文章举报

BigData_宇 发布了20 篇原创文章 · 获赞 22 · 访问量 1万+ 私信 关注

标签：appendChild,value,JS,getElementById,HTML,var,document,iTr,CSS
来源： https://blog.csdn.net/qq_43198568/article/details/104432485