添加表格

最新推荐文章于 2023-01-02 17:04:35 发布

吴机智

最新推荐文章于 2023-01-02 17:04:35 发布

阅读量91

点赞数

分类专栏：案例文章标签： js

本文链接：https://blog.csdn.net/m0_49893750/article/details/108503082

版权

案例专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <input type="text">
    <input type="text">
    <button>添加</button><br>
    <table border="1" width="500" style="text-align: center">
        <thead>
            <tr>
                <td>序号</td>
                <td>名字</td>
                <td>性别</td>
                <td>年龄</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>王树林</td>
                <td>男</td>
                <td>20</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>2</td>
                <td>阮锦涛</td>
                <td>男</td>
                <td>25</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>3</td>
                <td>李承泽</td>
                <td>男</td>
                <td>28</td>
                <td><button>删除</button></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>脚</td>
                <td>脚</td>
                <td>脚</td>
                <td>脚</td>
                <td>脚</td>
            </tr>
        </tfoot>
    </table>

    <script>
        // 快速获取
        // 先获取table
        var table = document.getElementsByTagName('table')[0];
        console.log(table);

        // 效果: 点击添加按钮, 将输入的信息添加到表格中
        var btn = document.getElementsByTagName('button')[0];
        var inps = document.getElementsByTagName('input');
        console.log(btn, inps);
        // 添加事件
        btn.onclick = function(){
            // 1. 获取到当前输入框的信息
            var user = inps[0].value;
            var sex = inps[1].value;
            var age = inps[2].value;
            console.log(user, sex, age);
            // 2. 创建行
            var tr = document.createElement('tr');
            console.log(tr);
            // 2.1 往行中添加单元格

            // 2.2.1 添加序号
            var td = document.createElement('td');
            td.innerHTML = table.tBodies[0].rows.length + 1;
            tr.appendChild(td);
            // console.log(table.tBodies[0].rows.length)

            //  2.2.2 添加姓名
            // var td1 = createE(user);
            tr.appendChild(createE(user, 'td'));

            //  2.2.3 添加性别
            // var td2 = document.createElement('td');
            // td2.innerHTML = sex;
            tr.appendChild(createE(sex, 'td'));

            //  2.2.4 添加年龄
            // var td3 = document.createElement('td');
            // td3.innerHTML = age;
            tr.appendChild(createE(age, 'td'));

            //  2.2.5 添加删除按钮
            // var td4 = document.createElement('td');
            // td4.innerHTML = '<button>删除</button>';
            tr.appendChild(createE('<button>删除</button>', 'td'));


            // 3. 追加行到表格中
            table.tBodies[0].appendChild(tr);
        }

        // 封装一个创建元素的函数
        function createE(text, type){
            // text: 创建的内容
            // type: 创建的类型
            var td1 = document.createElement(type);
            td1.innerHTML = text;
            // 设置返回值，将当前的创建的元素返回出去，在外面使用
            return td1;
        }

    </script>
</body>
</html>