Question

我有这个HTML代码：

<table>

    <tr>
        <td class="order">1</td><td>AAAAAAAAAA</td><td><a class="btn-remove-tr">Delete row</a></td>
    </tr>

    <tr>
        <td class="order">2</td><td>BBBBBBBBBB</td><td><a class="btn-remove-tr">Delete row</a></td>
    </tr>

    <tr>
        <td class="order">3</td><td>CCCCCCCCCC</td><td><a class="btn-remove-tr">Delete row</a></td>
    </tr>

    <tr>
        <td class="order">4</td><td>DDDDDDDDDD</td><td><a class="btn-remove-tr">Delete row</a></td>
    </tr>

    <tr>
        <td class="order">5</td><td>EEEEEEEEEE</td><td><a class="btn-remove-tr">Delete row</a></td>
    </tr>

</table>

我想重新排序每个td.order中的数字，所以如果我删除，例如，BBBBBBB（它的顺序为2 - 第二行），CCCCCC将从3更新为2，如下所示：

<table>

        <tr>
            <td class="order">1</td><td>AAAAAAAAAA</td><td><a class="btn-remove-tr">Delete row</a></td>
        </tr>

        <tr>
            <td class="order">2</td><td>CCCCCCCCCC</td><td><a class="btn-remove-tr">Delete row</a></td>
        </tr>

        <tr>
            <td class="order">3</td><td>DDDDDDDDDD</td><td><a class="btn-remove-tr">Delete row</a></td>
        </tr>

        <tr>
            <td class="order">4</td><td>EEEEEEEEEE</td><td><a class="btn-remove-tr">Delete row</a></td>
        </tr>

    </table>

如何重新排序每行内的每个td.order以反映当前的顺序？

这是我现在用于删除行的当前jQuery代码：

$('form').on('click', '.btn-remove-tr', function(e) {

    e.preventDefault();

    if($('table tr').length>1) {
        $(this).closest('tr').remove();
        // and here I need to reorder the remaining row numbers
    }

    return false;
});

jQuery中执行简单重新排序的最简单方法是什么？

Answer 1

我建议：

$('table').on('click', '.btn-remove-tr', function(e) {

    e.preventDefault();

    if($('table tr').length>1) {
        $(this).closest('tr').remove();

        // select all <td> elements with the class-name of
        // 'order'; iterate over that collection using the
        // text() method's anonymous function, passing the
        // i (index of the current element in the
        // collection) into that function:
        $('td.order').text(function (i) {

          // returning the sum of i + 1 to compensate for
          // JavaScript's zero-indexing:
          return i + 1;
        });

    }

    return false;
});

＆＃13;

$('table').on('click', '.btn-remove-tr', function(e) {

    e.preventDefault();

    if($('table tr').length>1) {
        $(this).closest('tr').remove();
        $('td.order').text(function (i) {
          return i + 1;
        });
          
    }

    return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>

        <tr>
            <td class="order">1</td><td>AAAAAAAAAA</td><td><a class="btn-remove-tr">Delete row</a></td>
        </tr>

        <tr>
            <td class="order">2</td><td>CCCCCCCCCC</td><td><a class="btn-remove-tr">Delete row</a></td>
        </tr>

        <tr>
            <td class="order">3</td><td>DDDDDDDDDD</td><td><a class="btn-remove-tr">Delete row</a></td>
        </tr>

        <tr>
            <td class="order">4</td><td>EEEEEEEEEE</td><td><a class="btn-remove-tr">Delete row</a></td>
        </tr>

    </table>

＆＃13;

Answer 2

首先要确保向表中添加自定义类/ id，以避免在页面有更多表时使用无用的事件，可能其中一个没有此功能。

小提琴是here，你可以看到下面的代码。

// Cache table and trigger button
// Best practice to add some class/id on table or specific path to it
var $table = $('table');
var $trigger = $('.btn-remove-tr', $table);

$trigger.on('click', function(e) {
    e.preventDefault();

        var $this = $(this);
    if ($('tr', $table).length === 0) {
        return false;
    }
        var $tr = $this.closest('tr');
        var currentIndex = $tr.index();

    // First of all re-index next items
    // You won t see any difference if you have, let say, less than 2-3k  rows
    $tr.nextAll().find('.order').each(function(i){
        $(this).text(i + currentIndex + 1);
    })

    // Remove the table
    $tr.remove();
});

有很多方法可以做到这一点，但在删除元素之后仅修改索引更有意义。

删除后重新排序行数 - jQuery

2 个答案: