JavaScript--删除Table中当前行

最新推荐文章于 2022-09-11 13:15:32 发布

weixin_30535167

最新推荐文章于 2022-09-11 13:15:32 发布

阅读量465

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dcy521/p/11390272.html

版权

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>