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

目录

一.创建页面基本样式

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

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

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

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

五.完整代码

六.实现效果

1.添加

2.删除

3.修改


一.创建页面基本样式

    姓名: <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>

六.实现效果

1.添加

2.删除

删除张四:

3.修改

修改小三的名字为"小四",学历为"小学"

点击修改

 进行修改

 点击保存

  • 14
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值