JavaScript--删除Table中当前行

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>

 

posted @ 2019-08-21 17:58  初晨~  阅读(6273)  评论(0)  编辑  收藏  举报