JS————动态表单，动态添加及删除（含注释）

<!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 {
            border-collapse: collapse;
            /* text-align: center; */
        }

        th,
        tr,
        td,
        table {
            border: 1px solid gray;
        }
    </style>
</head>

<body>
    <div>
        <table>
            <thead>
                <th>表头</th>
                <th>表头</th>
                <th>表头</th>
                <th>修改</th>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
    <script>
        var arr = [
            {
                name: "张三",
                subject: "语文",
                score: "99"
            },
            {
                name: "张三",
                subject: "语文",
                score: "299"
            },
            {
                name: "张三",
                subject: "语文",
                score: "199"
            },
            {
                name: "张三",
                subject: "语文",
                score: "9"
            }
        ]
        // 因没有数据库，故先创建一个数组里面放对象
        let tbody = document.querySelector("tbody")
        // 获取元素
        for (i = 0; i < arr.length; i++) {
            // 遍历数组
            var tr = document.createElement("tr")
            // 创建行
            tbody.appendChild(tr)
            // 添加行
            for (var k in arr[i]) {
                // 遍历数组
                let td = document.createElement("td")
                // 创建单元格
                td.innerHTML = arr[i][k]
                // 导入单元格的内容，即从上面的数组中
                tr.appendChild(td)
                // 添加单元格
            }
            let td = document.createElement("td")
            // 创建删除列（单元格）
            td.innerHTML = "<a href='javascript:;'>删除</a>"
            // 导入a标签，删除
            tr.appendChild(td)
            // 添加删除 单元格
            let a=document.querySelectorAll("a")
            // 获取 所有a为一个数组
            for(let i=0;i<a.length;i++){
                // 遍历a
                a[i].onclick=function(){
                    // a 即删除点击事件
                    tbody.removeChild(this.parentNode.parentNode)
                    // 删除 代码
                }
            }

        }
    </script>
</body>

</html>
成果图
JS————动态表单，动态添加及删除（含注释）

猜你喜欢
