JavaScript--删除Table中当前行

花自飘零 · 发表于 2019-8-21 17:58:00

HTML代码：

<body>
        <table border="1" width="1000" height="200">
            <tr>
                <td>测试</td>
                <td>测试</td>
                <td>测试</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>测试</td>
                <td>测试</td>
                <td>测试</td>
                <td>
                    <a href="javascript:;" onclick='{if(confirm("确定要删除吗?")) {deleteTr(this); }else {}}'>删除</a>
                </td>
            </tr>
            <tr>
                <td>测试</td>
                <td>测试</td>
                <td>测试</td>
                <td>
                    <a href="javascript:;" onclick='{if(confirm("确定要删除吗?")) {deleteTr(this); }else {}}'>删除</a>
                </td>
            </tr>
            <tr>
                <td>测试</td>
                <td>测试</td>
                <td>测试</td>
                <td>
                    <a href="javascript:;" onclick='{if(confirm("确定要删除吗?")) {deleteTr(this); }else {}}'>删除</a>
                </td>
            </tr>
        </table>
    </body>

Js代码：

<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    //obj是点击行的this
    function deleteTr(obj) {
        //通过this找到父级元素节点
        var tr = obj.parentNode.parentNode;
        //找到表格
        var tbody = tr.parentNode;
        //删除行
        tbody.removeChild(tr);
        //只剩行首时删除表格
        if (tbody.rows.length == 1) {
            tbody.parentNode.removeChild(tbody);
        }
    }
</script>

来源：https://www.cnblogs.com/dcy521/p/11390272.html

JavaScript--删除Table中当前行

浏览过的版块