＜JavaScript＞代码实现学生信息录入,实现增.删.改功能.

moanmu

已于 2023-02-22 14:00:05 修改

阅读量2.8k

点赞数 15

文章标签： javascript 前端 css

于 2022-11-10 23:41:14 首次发布

本文链接：https://blog.csdn.net/m0_48465196/article/details/127798342

版权

一.创建页面基本样式

二.实现添加功能.对添加按钮绑定点击后,将输入的信息渲染到页面表格

三.实现删除功能(仍然处于"添加"按钮绑定点击的函数中)

四.实现修改功能(仍然处于"添加"按钮绑定点击的函数中)

一.创建页面基本样式

    姓名: <input type="text">
    学号: <input type="text">
    年龄: <input type="text">
    性别: <input type="text">
    学历: <input type="text">
    <button class="add">添加</button>
    <br>
    <br>
    <br>
    <br>
    <br>
    <table border="1px" width="800px" cellspacing="0" align="center">
        <thead>
            <tr>
                <th>姓名</th>
                <th>学号</th>
                <th>年龄</th>
                <th>性别</th>
                <th>学历</th>
                <th>删/改</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

实现效果:

二.实现添加功能.对添加按钮绑定点击后,将输入的信息渲染到页面表格

采用字符串拼接的方法,innerHTML会识别标签

        let addBut = document.querySelector(".add");
        let inp = document.querySelectorAll("input");
        let arr = [...inp];
        console.log(arr);
        let str1 = "";
        addBut.onclick = function () {
            //let str1="";
            let str = "<tr>";
            for (let i = 0; i < arr.length; i++) {
                str = str + `<td>${inp[i].value}</td>`
                console.log(inp[i].value);

            }
            str = str + `<td><button class="rev">修改</button><button class="del">删除</button></td>`
            str = str + "</tr>";
            console.log(str);
            str1 = str1 + str;
            console.log(str1);
            document.querySelector("table tbody").innerHTML = str1;
            for (let i = 0; i < arr.length; i++) {
                inp[i].value = "";
            }

三.实现删除功能(仍然处于"添加"按钮绑定点击的函数中)

          //实现删除功能

            let del = document.querySelectorAll(".del");
            //console.log(del);
            for (let i = 0; i < del.length; i++) {
                del[i].onclick = function () {
                    del[i].parentElement.parentElement.remove();
                    str1 = document.querySelector("table tbody").innerHTML;
                    console.log(str1);
                }
            }

四.实现修改功能(仍然处于"添加"按钮绑定点击的函数中)

1.判断修改按钮处于什么情况

该按钮有两种情况

一种是未被修改,按钮显示"修改"字样,可以被点击后进行修改,字样变为"保存"

一种是正在被修改,按钮显示"保存"字样,可以被点击后进行保存,字样变为"修改"

这里用if语句进行情况判断,代码如下:

              //实现修改功能
            let rev = document.querySelectorAll(".rev");
            console.log(rev);
            for (let i = 0; i < rev.length; i++) {
                rev[i].onclick = function () {
                    if (rev[i].innerHTML == "修改") {
                        rev[i].innerHTML = "保存";
                        let cols = rev[i].parentElement.parentElement.children;
                        for (let j = 0; j < cols.length - 1; j++) {
                            console.log(cols[j]);
                            let inp = document.createElement("input");//添加输入框input元素节点
                            let str = cols[j].innerText;
                            cols[j].innerHTML = "";
                            cols[j].appendChild(inp);
                            inp.value = str;
                            str1 = document.querySelector("table tbody").innerHTML;
                        }
                    } 
                    else if (rev[i].innerHTML == "保存") 
                    {
                        let cols = rev[i].parentElement.parentElement.children;
                        rev[i].innerHTML = "修改";
                        for (let j = 0; j < cols.length - 1; j++) {
                            let str = cols[j].children[0].value;
                            cols[j].children[0].remove();
                            cols[j].innerHTML =str;
                            str1 = document.querySelector("table tbody").innerHTML;
                        }

                    }
                }

            }

五.完整代码

<!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>
        td {
            text-align: center;
        }
    </style>
</head>

<body>
    姓名: <input type="text">
    学号: <input type="text">
    年龄: <input type="text">
    性别: <input type="text">
    学历: <input type="text">
    <button class="add">添加</button>
    <br>
    <br>
    <br>
    <br>
    <br>
    <table border="1px" width="800px" cellspacing="0" align="center">
        <thead>
            <tr>
                <th>姓名</th>
                <th>学号</th>
                <th>年龄</th>
                <th>性别</th>
                <th>学历</th>
                <th>删/改</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        let addBut = document.querySelector(".add");
        let inp = document.querySelectorAll("input");
        let arr = [...inp];
        console.log(arr);
        let str1 = "";
        addBut.onclick = function () {
            //let str1="";
            let str = "<tr>";
            for (let i = 0; i < arr.length; i++) {
                str = str + `<td>${inp[i].value}</td>`
                console.log(inp[i].value);

            }
            str = str + `<td><button class="rev">修改</button><button class="del">删除</button></td>`
            str = str + "</tr>";
            console.log(str);
            str1 = str1 + str;
            console.log(str1);
            document.querySelector("table tbody").innerHTML = str1;
            for (let i = 0; i < arr.length; i++) {
                inp[i].value = "";
            }

            //实现删除功能

            let del = document.querySelectorAll(".del");
            //console.log(del);
            for (let i = 0; i < del.length; i++) {
                del[i].onclick = function () {
                    del[i].parentElement.parentElement.remove();
                    str1 = document.querySelector("table tbody").innerHTML;
                    console.log(str1);
                }
            }

            //实现修改功能
            let rev = document.querySelectorAll(".rev");
            console.log(rev);
            for (let i = 0; i < rev.length; i++) {
                rev[i].onclick = function () {
                    if (rev[i].innerHTML == "修改") {
                        rev[i].innerHTML = "保存";
                        let cols = rev[i].parentElement.parentElement.children;
                        for (let j = 0; j < cols.length - 1; j++) {
                            console.log(cols[j]);
                            let inp = document.createElement("input");//添加输入框input元素节点
                            let str = cols[j].innerText;
                            cols[j].innerHTML = "";
                            cols[j].appendChild(inp);
                            inp.value = str;
                            str1 = document.querySelector("table tbody").innerHTML;
                        }
                    } 
                    else if (rev[i].innerHTML == "保存") 
                    {
                        let cols = rev[i].parentElement.parentElement.children;
                        rev[i].innerHTML = "修改";
                        for (let j = 0; j < cols.length - 1; j++) {
                            let str = cols[j].children[0].value;
                            cols[j].children[0].remove();
                            cols[j].innerHTML =str;
                            str1 = document.querySelector("table tbody").innerHTML;
                        }

                    }
                }

            }
        }


    </script>

</body>

</html>