JavaScript简单的学生信息管理

最新推荐文章于 2023-08-11 08:55:31 发布

你倒是敲代码啊.

最新推荐文章于 2023-08-11 08:55:31 发布

阅读量7k

点赞数 4

分类专栏： web前端文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_43446165/article/details/104223950

版权

web前端专栏收录该内容

12 篇文章 8 订阅

订阅专栏

界面样式

在这里插入图片描述

主要功能

添加学生
删除学生
鼠标悬停时，将所在行变为绿色
支持全选，反选，和全不选

代码部分

html

<html>

<head>
    <meta charset="UTF-8">
    <title>学生信息管理系统</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>

    <div id="title">学生信息管理系统</div>
    <div id="input-box">
        <input id="id" type="text" placeholder="请输入学号" name="id">
        <input id="name" type="text" placeholder="请输入姓名" name="name">
        <input id="gender" type="text" placeholder="请输入性别" name="gender">
        <button id="add">添加</button>
    </div>

    <br>
    <br>

    <div id="table-box">
        <div id="title1">学生信息表
            <br>
            <button id="arcall">反选</button>
            <button id="empty">全不选</button>
            <button id="all">全选</button>
        </div>
        <table id="stutable">
            <tr id="row1">
                <td></td>
                <td>编号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>操作</td>
            </tr>
        </table>
    </div>

</body>

<footer>
    <script src="js/index.js"></script>
</footer>

</html>

div {
    width: 100%;
    text-align: center;
    margin: auto;
}

#title {
    font-weight: 700;
}

#stutable {
    width: 50%;
    margin: 3px auto;
    border: 1px solid black;
    text-align: center;
}

#stutable tr td {
    width: 120px;
    text-align: center;
    border: 1px solid black;
}

#title1 {
    margin: auto auto;
    font-weight: 700;
    width: 30%;
}

#title1 button {
    
}

javascript

var studentAddButton = document.getElementById("add");

function createCell(name) {
    var message = document.getElementById(name);
    var textNode = document.createTextNode(message.value);
    var cell = document.createElement("td");
    cell.appendChild(textNode);
    return cell;
}


function createDeleteCell() {
    var textNode = document.createTextNode("删除");
    var deleteCell = document.createElement("a");
    deleteCell.appendChild(textNode);
    deleteCell.setAttribute("href", "javascript:void(0);");
    deleteCell.setAttribute("id", "delete");

    deleteCell.onclick = function () {
        var parent = this.parentNode;
        var tmp = parent = parent.parentNode;
        parent = parent.parentNode;
        parent.removeChild(tmp);
    }

    var cell = document.createElement("td");
    cell.appendChild(deleteCell);

    return cell
}

function createSmallCell() {
    var box = document.createElement("input");
    box.setAttribute("type", "checkbox");
    box.setAttribute("class", "cbox");

    var smallCell = document.createElement("td");
    smallCell.appendChild(box);
    return smallCell;
}

studentAddButton.onclick = function () {
    var table = document.getElementById("stutable");
    var nextRow = document.createElement("tr");

    nextRow.appendChild(createSmallCell());

    nextRow.appendChild(createCell("id"));
    nextRow.appendChild(createCell("name"));
    nextRow.appendChild(createCell("gender"));
    nextRow.appendChild(createDeleteCell());

    nextRow.onmouseover = function () {
        nextRow.style.backgroundColor = "yellowgreen";
    }

    nextRow.onmouseout = function () {
        nextRow.style.backgroundColor = "white"
    }

    table.appendChild(nextRow);
}

var all = document.getElementById("all");
all.onclick = function () {
    var checkboxList = document.getElementsByClassName("cbox");
    for (var i = 0; i < checkboxList.length; i++) {
        var box = checkboxList[i];
        if (!box.checked) {
            box.click();
        }
    }
}

document.getElementById("empty").onclick = function () {
    var checkboxList = document.getElementsByClassName("cbox");
    for (var i = 0; i < checkboxList.length; i++) {
        var box = checkboxList[i];
        if (box.checked) {
            box.click();
        }
    }
}

document.getElementById("arcall").onclick = function () {
    var checkboxList = document.getElementsByClassName("cbox");
    for (var i = 0; i < checkboxList.length; i++) {
        checkboxList[i].click();
    }
}