Js实现点击新增和删除表格

最新推荐文章于 2023-08-23 23:20:04 发布

你是我遥远万里最牵挂的猪

最新推荐文章于 2023-08-23 23:20:04 发布

阅读量863

点赞数 3

分类专栏： javascript 文章标签： js 前端

本文链接：https://blog.csdn.net/Leejinian888/article/details/94404036

版权

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            border: 1px solid;
            width: 800px;
            min-height: 300px;
            margin: 50px auto;
        }

        #up {
            margin-top: 5px;
            height: 25px;
            display: flex;
            justify-content: space-between;
        }

        input:nth-child(5) {
            width: 50px;
        }

        table {
            font-size: 14px;
            width: 100%;
            margin-top: 10px;
            text-align: center;
            border-spacing: 0px;
            border-collapse: collapse;
        }

        table td {
            border: 1px solid red;
        }

        span {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        <div id="up">
            <input type="text" placeholder="请输入您的姓名">
            <input type="text" placeholder="请输入您的性别">
            <input type="text" placeholder="请输入您的年龄">
            <input type="text" placeholder="请输入您的专业">
            <input type="button" value="添加">

        </div>
        <table id="tab">
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>专业</td>
                <td>操作</td>
            </tr>
        </table>
    </div>


    <script>
        var inputs = document.querySelectorAll("input");  //获取元素
        var tab = document.getElementById("tab");
        // console.log(inputs[4]);
        inputs[4].onclick = function () {       //绑定点击事件
            for (var i = 0; i < inputs.length - 1; i++) {
                if (inputs[i].value == "") {    //当前面输入框为空时,弹出提示信息
                    alert("请填写完整信息");
                    return false;           // 阻止全部为空时alert一直弹窗;
                }
            }
            var tr = document.createElement("tr");  //创建一个行元素
            tab.appendChild(tr);                    //把tr追加到父元素下


            var td1 = document.createElement("td");  //创建一个单元格
            tr.appendChild(td1);                     //把单元格追加到父元素tr下
            td1.innerHTML = inputs[0].value;          //把输入框的value值赋给单元格

            var td2 = document.createElement("td");
            tr.appendChild(td2);
            td2.innerHTML = inputs[1].value;

            var td3 = document.createElement("td");
            tr.appendChild(td3);
            td3.innerHTML = inputs[2].value;

            var td4 = document.createElement("td");
            tr.appendChild(td4);
            td4.innerHTML = inputs[3].value;

            var td5 = document.createElement("td");
            tr.appendChild(td5);
            td5.innerHTML = "<span>删除</span>";

            var span = document.querySelectorAll("span") //创建一个span-->>用来装最后一个单元格的删除(可点击,点击事件)              //赋值span的内容
            // console.log(span);
            for (var i = 0; i < span.length; i++) {
                span[i].onclick = function () {
                    this.parentNode.parentNode.remove();
                }
            }
            clear();        //调用下面函数
        }

        function clear() {          //点击添加按钮以后，自动清空
            for (var i = 0; i < inputs.length - 1; i++) {
                inputs[i].value = "";
            }
        }

    </script>
</body>

</html>

                            **效果图如下**

在这里插入图片描述

你是我遥远万里最牵挂的猪

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Js实现点击新增和删除表格

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫