html&js之简单信息录入——删除、修改、保存

最新推荐文章于 2024-04-16 17:01:38 发布

Euniceing

最新推荐文章于 2024-04-16 17:01:38 发布

阅读量2.1k

点赞数 5

分类专栏：教程前端 h5 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/euniceing/article/details/126839282

版权

前端同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

教程

6 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用HTML和CSS构建一个居中的表格，并利用JavaScript实现动态添加、删除和修改表格行的功能。用户输入信息后，点击添加按钮，信息会显示在表格中，同时每行末尾提供删除和修改按钮。删除按钮直接移除相应行，修改按钮可以切换编辑状态，允许用户修改表格内容，完成后保存更改。

摘要由CSDN通过智能技术生成

html&css部分

 <style>
        table {
            margin: 0 auto;
        }

        tr {
            text-align: center;
        }
 </style>

 姓名：<input type="text">
    学号：<input type="text">
    年龄：<input type="text">
    性别：<input type="text">
    学历：<input type="text">
    <button class="add">添加</button>
    <br>
    <br>
    <br>
    <table border="1px" width="800px" height="30px" cellspacing="0">

        <tr>
            <td>姓名</td>
            <td>学号</td>
            <td>年龄</td>
            <td>性别</td>
            <td>学历</td>
            <td>删/改</td>
        </tr>
    </table>

js部分

先获取到元素


        let add = document.querySelector(".add");
        let input = document.querySelectorAll("body>input");
        let table = document.querySelector("table");

点击添加新建一行

根据value值创建单元格，将value值作为单元格的内容多加一个单元格放置删除和修改按钮

然后将单元格放进行中，行放进表中

  add.onclick = function () {      
            let tr1 = document.createElement("tr");

             //循环将input中的内容添加到表格当中
             for (let i = 0; i < input.length; i++) {
                let td = document.createElement("td");//创建表格
                td.innerHTML = input[i].value;
              //将表格添加到行中去
                tr1.appendChild(td);

            }
            //添加删除按钮
            let tdLast = document.createElement("td");
            let but1 = document.createElement("button");
            but1.innerHTML = "删除";
            tdLast.appendChild(but1);
            but1.onclick = mydel;

            //添加修改按钮
            let but2 = document.createElement("button");
            but2.innerHTML = "修改";
            tdLast.appendChild(but2);
            but2.onclick = myadd;
            tr1.appendChild(tdLast);

            //将行添加到表单中去
            table.appendChild(tr1);

        }

删除按钮

function mydel() {
            this.parentElement.parentElement.remove();
        }

删除之前

点击删除之后：

修改按钮

          function myadd() {
             //先获取到每个表格
            let arrson = this.parentElement.parentElement.children;
            //进行if判断，如果是修改，就变成保存
            if (this.innerHTML == "修改") {
                this.innerHTML = "保存";
                for (let i = 0; i < arrson.length - 1; i++) {
                      //在表格中创建input框
                    let myinp = document.createElement("input");
                    //input中的值为表格之前未修改的内容
                    myinp.value = arrson[i].innerHTML;
                    //将表格中的内容修改为空
                    arrson[i].innerHTML = "";
                    //将input框添加到表格中去
                    arrson[i].appendChild(myinp);
                }
            } else {
                this.innerHTML == "修改";
                for (let i = 0; i < arrson.length - 1; i++) { 
                       //将修改后的内容保存到表格中
                    arrson[i].innerHTML = arrson[i].children[0].value;
                }
            }

 let add = document.querySelector(".add");
        let input = document.querySelectorAll("body>input");
        let table = document.querySelector("table");

        add.onclick = function () {      
            let tr1 = document.createElement("tr");
              
            //添加的正则表达式，学号为9位并且为数字
            if(!(/[0-9]{9}/.test(input[1].value))){
                alert("请输入正确的学号");
                return;
            }

            if(!(/[0-9]{2}/.test(input[2].value))){
                alert("请输入正确的年龄");
                return;
            }
            

            for (let i = 0; i < input.length; i++) {
                let td = document.createElement("td");
                   //内容不能为空
                if (input[i].value.trim() == "") {
                    alert("请完整填写信息");
                    return;
                }
                td.innerHTML = input[i].value;
                tr1.appendChild(td);

            }

            let tdLast = document.createElement("td");
            let but1 = document.createElement("button");
            but1.innerHTML = "删除";
            tdLast.appendChild(but1);
            but1.onclick = mydel;

            let but2 = document.createElement("button");
            but2.innerHTML = "修改";
            tdLast.appendChild(but2);
            but2.onclick = myadd;

            tr1.appendChild(tdLast);

            table.appendChild(tr1);

        }

        function mydel() {
            this.parentElement.parentElement.remove();
        }

        function myadd() {

            let arrson = this.parentElement.parentElement.children;
            if (this.innerHTML == "修改") {
                this.innerHTML = "保存";
                for (let i = 0; i < arrson.length - 1; i++) {
                    let myinp = document.createElement("input");
                    myinp.value = arrson[i].innerHTML;
                    arrson[i].innerHTML = "";
                    arrson[i].appendChild(myinp);
                }
            } else {
                this.innerHTML == "修改";
                for (let i = 0; i < arrson.length - 1; i++) {
                    arrson[i].innerHTML = arrson[i].children[0].value;
                }
            }

        }

js部分完整代码