JavaScript怎样实现表格删除一行的功能？-群英

您现在的位置是：群英 > 开发技术 > web开发 >

JavaScript怎样实现表格删除一行的功能？

PHP中文网发表于 2021-09-24 17:44 次浏览

JavaScript怎样实现表格删除一行的功能？对表格做增删操作是比较常见的需求，而实现其实并不困难，我们想要做删除表格一行的数据可以使用remove函数，接下来我们就一起看看remove方法的使用。

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

javascript在form表单中增加数据到表格中，也可以单独删除某一行

remove() 方法移除被选元素，包括所有文本和子节点。

该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。

但除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container {
            text-align: center;
        }

        #mytable {
            width: 500px;
            text-align: center;
            border: 1px solid #ccc;
            margin: 0 auto;
        }

        #mytable td, #mytable th {
            border: 1px solid #ccc;
        }

        #myfrm {
            line-height: 30px;
        }
    </style>
    <script>
        window.onload = function () {
            $("btnAdd").onclick = function(){
                //创建tr
                let tr = document.createElement('tr');
                //创建td
                let tdName = document.createElement('td');
                let tdAge = document.createElement('td');
                let tdSex = document.createElement('td');
                let tdPhone = document.createElement('td');
                let tdDelete = document.createElement('td');

                //td中放数据
                tdName.innerText = $('name').value;
                tdAge.innerText = $('age').value;
                tdSex.innerText = $('m').checked?$('m').value:$('f').value;

                tdPhone.innerText = $('phone').value;

                //这边如果不添加删除，增加数据之后，会删除不了
                let btndelete = document.createElement('input');
                btndelete.type='button';
                btndelete.value='删除';
                btndelete.onclick = function(){
                    this.parentNode.parentNode.remove();
                }
                tdDelete.appendChild(btndelete);

                //td放入tr;
                tr.appendChild(tdName);
                tr.appendChild(tdAge);
                tr.appendChild(tdSex);
                tr.appendChild(tdPhone);
                tr.appendChild(tdDelete);

                //tr放入表格

                $('tb').appendChild(tr);
            }


            //删除
            let btnlist = document.querySelectorAll('.delete');
            for(let i = 0;i<btnlist.length;i  ){
                btnlist[i].onclick = function () {
                    this.parentNode.parentNode.remove();
                }
            }


        }

        function $(id) {
            return document.getElementById(id);
        }
    </script>
</head>
<body>
<p id="container">
    <table id="mytable">
        <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tb">
        <tr>
            <td>tom</td>
            <td>20</td>
            <td>male</td>
            <td>110</td>
            <td>
                <input type="button" value="删除" class="delete">
            </td>
        </tr>
        <tr>
            <td>jack</td>
            <td>22</td>
            <td>male</td>
            <td>119</td>
            <td><input type="button" value="删除" class="delete"></td>
        </tr>
        <tr>
            <td>alice</td>
            <td>25</td>
            <td>female</td>
            <td>120</td>
            <td><input type="button" value="删除" class="delete"></td>
        </tr>
        </tbody>
    </table>
    <hr>

    <form action="" id="myfrm">
        姓名：<input type="text" id="name"> <br>
        年龄：<input type="text" id="age"> <br>
        性别：<input type="radio" name="sex" id="m" value="male" checked> 男
        <input type="radio" name="sex" id="f" value="female"> 女 <br>
        电话：<input type="text" id="phone"> <br>
        <input type="button" value="添    加" id="btnAdd">
        <input type="reset" value="重    置">
    </form>
</p>

</body>
</html>

以上就是JavaScript实现表格删除一行的介绍了，上述实例对大家学习remove()方法有一定的帮助，需要的朋友可以了解看看，想要了解更多JavaScript的内容，请关注群英网络其它相关文章。

标签：JavaScript表格

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：JavaScript中删除键值对的方法是什么？怎样实现？

下一篇：没有了