ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

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

2020-02-21 22:39:07  阅读：425  来源： 互联网

标签：appendChild value JS getElementById HTML var document iTr CSS


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

效果

话不多说，直接看效果，本次代码较为复杂，希望大家可以耐心阅读，不懂的可以评论或者邮箱联系我（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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有