如何使用js来实现添加表格

最新推荐文章于 2023-01-02 01:38:49 发布

Cultivators

最新推荐文章于 2023-01-02 01:38:49 发布

阅读量428

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Cultivators/article/details/117415210

版权

<body>
    姓名: <input type="text"> <br>
    性别: <input type="radio" name="gender" value="male" checked> 男 <input type="radio" name="gender" value="female"> 女
    <br>
    年龄: <input type="text"> <br>
    <button id="add">添加</button>
    <br><br>

    <table width='500' border="1">
        <!-- 表格头部 -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <!-- 表格主体, 内容 -->
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>20</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>男</td>
                <td>21</td>
            </tr>
            <tr>
                <td>赵六</td>
                <td>女</td>
                <td>22</td>
            </tr>
        </tbody>
    </table>


    <script>
        // 获取元素
        var tab = document.querySelector('table');
        var ipts = document.querySelectorAll('input');
        var add = document.getElementById('add');

        // 点击add
        add.onclick = function () {
            // 获取用户的输入
            var nameV = ipts[0].value;
            var ageV = ipts[3].value;
            var genderV = ipts[1].checked ? '男' : '女';

            if (!nameV || !ageV) {
                alert('请输入完整信息');
                return;
            }

            // 创建节点设置内容
            var tr = createEle('tr', '');
            var td1 = createEle('td', nameV);
            var td2 = createEle('td', genderV);
            var td3 = createEle('td', ageV);
      
            // 拼接节点
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            // console.log(tr);
            tab.tBodies[0].appendChild(tr);

            // 清空
            ipts[0].value = '';
            ipts[1].checked = true;
            ipts[3].value = '';
        }


        function createEle(tagName, val) {
            // 创建节点
            var ele = document.createElement(tagName);
            // 赋值内容
            ele.innerHTML = val;
            // 返回节点
            return ele;
        }

    </script>

</body>