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刪除。

猜您在找 vue+element ui項目總結點（六）table編輯當前行、刪除當前行、新增、合計操作 vue+element ui項目總結點（六）table編輯當前行、刪除當前行、新增、合計操作 vi刪除當前行的字符 jquery 刪除表格當前行 jquery 獲取table當前行值 Jqeury獲取table當前行與指定列在ListView中獲取當前行的索引 Vue(elementUI table組件獲取表格當前行的索引) elementui table表格點擊當前行顯示背景色 Bootstrap Table 選中當前行 click-row.bs.table 和 onClickRow ，支持單選，多選