JavaScript--删除Table中当前行

本文转载自查看原文 2019-08-21 17:58 1937 JavaScript

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>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 javascript获取table当前行的内容 el-table中操作一栏怎么根据当前行的信息显示编辑、删除、编辑完成按钮 ElementUI表格中获取当前行数据（实现对table数据的修改和删除） JavaScript--遍历table中的tr存对象 vue+element ui项目总结点（六）table编辑当前行、删除当前行、新增、合计操作 vue+element ui项目总结点（六）table编辑当前行、删除当前行、新增、合计操作 ListView 中点击Item中的Button删除当前行 vi删除当前行的字符 jquery 删除表格当前行 JavaScript--动态添加元素（纯js书写table并删除数据）