JS动态添加删除表格

晚来的棠棠

于 2021-11-18 09:27:18 发布

阅读量1.2k

点赞数 3

分类专栏：笔记文章标签： javascript html5 前端

本文链接：https://blog.csdn.net/qq_50822277/article/details/121393119

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

大家好！我是棠棠，今天，我给你们说一下JS的动态添加和删除表格，废话不多说，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格专题</title>
</head>
<body>
    <table border="1">
        <caption>表格名称</caption>
        <thead>
            <th>姓名</th>
            <th>年级</th>
            <th>年龄</th>
            <th>操作</th>
        </thead>
        <tbody id="tab">
        <tr>
            <td>单元格11</td>
            <td>单元格12</td>
            <td>单元格13</td>
            <td><a href="#" onclick="shan()">删除</a></td>
        </tr>
        <tr>
            <td>单元格21</td>
            <td>单元格22</td>
            <td>单元格23</td>
            <td><a href="#" onclick="shan()">删除</a></td>
        </tr>
        <tr>
            <td>单元格31</td>
            <td>单元格32</td>
            <td>单元格33</td>
            <td><a href="#" onclick="shan()">删除</a></td>
        </tr>
        </tbody>
        <tfoot><td>备注：</td><td colspan="3"></td></tfoot>
    </table>
        <!-- 按钮 -->
        <p><input type="button" value="增加行" onclick="addtr()">
        <!-- 输入数据 -->
        <input type="text" class="Ban">
        <input type="text" class="xing">
        <input type="text" class="age">
</body>
</html>

这就是上面代码完成的表格

下面的代码就是JS代码了，其实，这个整体案例，还是比较简单的。

<script type="text/javascript">
            //增加行的方法2
            //更加的灵活
            function addtr(){
                // 获取tbody的id
                var tab=document.getElementById('tab');
                // 获取输入框里面的值——.value
                var Ban=document.querySelector('.Ban').value;
                var xing=document.querySelector('.xing').value;
                var age=document.querySelector('.age').value;
                // tbody添加一行数据
                var tradd=tab.insertRow(0)
                // 数据为输入框里面的值
                tradd.innerHTML='<td>'+Ban+'</td><td>'+xing+'</td><td>'+age+'</td><td><a href="#" οnclick="shan()">删除</a></td>'

            }
            //删除行的方法
            function shan() {
                var td=document.querySelector('td');
                td.parentNode.parentNode.removeChild(td.parentNode)
            }
</script>

在这里插入图片描述

好了，今天的内容就到此结束了。我们下期再见！

晚来的棠棠

关注

3
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
1
评论
JS动态添加删除表格

大家好！我是棠棠，今天，我给你们说一下JS的动态添加和删除表格，废话不多说，直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格专题</title></head><body> <table border="1"> <caption>表格名称.
复制链接

扫一扫