用js添加表单的内容，默认表单有内容

最新推荐文章于 2024-05-21 14:15:14 发布

清酒独酌

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量510

点赞数

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

本文链接：https://blog.csdn.net/yang68668/article/details/121144646

版权

javascript 专栏收录该内容

57 篇文章 4 订阅

订阅专栏

 <style>
        div {
            text-align: center;
        }
        
        table {
            width: 640px;
            border: 1px solid gray;
            border-collapse: collapse;
            margin: 50px auto;
        }
        
        thead tr {
            background: #ccc;
        }
        
        th,
        td {
            width: 160px;
            line-height: 35px;
            border: 1px solid gray;
            text-align: center;
        }
    </style>
</head>

<body>
    <div>
        <label for="">用户名：</label>
        <input type="text" id="txt1">
        <label for="">年龄：</label>
        <input type="text" id="txt2">
        <button id="btn">添加</button>
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="box">

            </tbody>
        </table>
    </div>
    <script>
        // 1. 获取用户输入的用户名和年龄
        // 2. 创建tr节点， tr节点创建4个td节点
        // 3. 第一个td节点显示编号， 第二个td节点中插入文本节点， 用户名 以此类推。 第四个插入 一个删除按钮
        // 4.4 个td节点插入到tr中， tr插入到tbody中。
        // 5. 删除按钮可以实现删除功能。
        var data = [{
                id: 1,
                username: "张三",
                age: 34
            }, {
                id: 2,
                username: "李四",
                age: 40
            }]
            /*  */
        var index = 1;
        /* 获取按钮 */
        var btn = document.getElementById('btn')
            /* 添加点击事件 */
        btn.onclick = function() {
                //获取用户名
                var txt1 = document.getElementById("txt1")
                var username = txt1.value;
                //获取年龄
                var txt2 = document.getElementById("txt2")
                var age = txt2.value;
                /* 调用函数 */
                fn(index, username, age)
            }
            /* 默认出现的 */
        var tbody = document.getElementById("box") //获取tbody
            /* 遍历添加 */
        for (k = 0; k < data.length; k++) {
            fn(data[k].id, data[k].username, data[k].age)
        }
        /* 绑定按钮的点击事件 */
        function fn(id, username, age) {
            /* 创建tr节点 */
            var tr = document.createElement('tr')
                /* 创键四个t的d节点 */
            var str = `<td>${id}</td><td>${username}</td><td>${age}</td><td><button class="del">删除</button></td>`
            tr.innerHTML = str;
            /* 获取删除按钮 */
            var delBtn = tr.querySelector(".del")
                /* 给按钮绑定点击事件 */
            delBtn.onclick = function() {
                    delBtn.parentNode.parentNode.remove();
                }
                /* 把tr插入到tbody中 */
            tbody.appendChild(tr);
            /* 运行一次 就加一 */
            index++;
        }
    </script>
</body>

清酒独酌

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
用js添加表单的内容，默认表单有内容

<style> div { text-align: center; } table { width: 640px; border: 1px solid gray; border-collapse: collapse; margin: 50px auto; } ..
复制链接

扫一扫