且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

删除后在javascript中重新编号附加表行

更新时间:2023-12-05 18:11:46

首先删除该行,然后使用 $.each 函数

Remove the row first then update other tr using $.each function

看看小提琴来获得结果: https://jsfiddle.net/hL625r4p/

Take a look at the fiddle to get your result: https://jsfiddle.net/hL625r4p/

$(document).ready(function () {
    $("button").click(function () {
       $(this).closest('tr').remove();
        $(".row-id").each(function (i){
           $(this).text(i+1);
        }); 
    });     
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border='1'>
    <tr>
        <td class='row-id'>1</td>
        <td>Row 1</td>
        <td><button>Delete</button></td>
    </tr>
    <tr>
        <td class='row-id'>2</td>
        <td>Row 2</td>
        <td><button>Delete</button></td>
    </tr>
    <tr>
        <td class='row-id'>3</td>
        <td>Row 3</td>
        <td><button>Delete</button></td>
    </tr>
    <tr>
        <td class='row-id'>4</td>
        <td>Row 4</td>
        <td><button>Delete</button></td>
    </tr>
</table>