js实现一个简单的学生信息管理系统_javascript学生管理系统-CSDN博客

本文链接：https://blog.csdn.net/qq_48135073/article/details/126875841

1、预期目标

能给每个项目添加数据。
生成一个表单能保存数据并进行展示。
能对表单里的数据进行删除和修改。

2、简单分析
首先添加数据只需要在对应的列表项后面再添加行保存用户输入的数据即可，用户输入的数据是保存在input节点的value属性里，我们循环遍历input节点的类数组即可获取到数据。

数据的修改和删除功能，只需要我们获取到整行的数据即可进行操作，而修改操作是对单个数据进行修改，所以还需要再循环遍历这个类数组。

3、代码实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            margin: 0 auto;
            border: 1px solid black;
            margin-top: 50px;
            width: 600px;
        }
    </style>
</head>

<body>
    姓名:<input type="text">
    学号:<input type="text">
    年龄:<input type="text">
    性别:<input type="text">
    学历:<input type="text">
    <button class="add">添加</button>
    <table cellspacing="0">
        <tr>
            <td>姓名</td>
            <td>学号</td>
            <td>年龄</td>
            <td>性别</td>
            <td>学历</td>
            <td>删改</td>
        </tr>

    </table>
    <script>

        let add = document.querySelector(".add");
        let input = document.querySelectorAll("body>input");
        let table = document.querySelector("table");
        //添加数据
        add.onclick = function () {
            let tr = document.createElement("tr");
            for (let i = 0; i < input.length; i++) {
                let td = document.createElement("td");
                td.innerHTML = input[i].value;
                tr.appendChild(td);
            }

            let tdl = document.createElement("td");
            let del = document.createElement("button");
            del.innerHTML = "删除"
            tdl.appendChild(del);
            del.onclick = myFun1;

            let update = document.createElement("button")
            update.innerHTML = "修改"
            tdl.appendChild(update);
            update.onclick = myFun2;

            tr.appendChild(tdl);
            table.appendChild(tr);

        }
        //删除数据
        function myFun1() {
            this.parentElement.parentElement.remove();

        }
        //修改数据
        function myFun2() {
            let arr1 = this.parentElement.parentElement.children;
            if (this.innerHTML == "修改") {
                this.innerHTML = "保存";
                for (let i = 0; i < arr1.length - 1; i++) {
                    let a1 = document.createElement("input");
                    a1.value = arr1[i].innerHTML;
                    arr1[i].innerHTML = "";
                    arr1[i].appendChild(a1);
                    //console.log(tr.children[i]);
                }
            } else {
                this.innerHTML = "修改";
                for (let i = 0; i < arr1.length - 1; i++) {
                    arr1[i].innerHTML = arr1[i].children[0].value;
                }
            }


        }


    </script>



</body>

</html>