CODEWITHSUNDEEP
jquery
Jimmy Sikh
Jimmy Sikh

Reputation: 19

Reorder numbers of rows after delete - jQuery

I have this html code:

<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>

and I want to reorder the numbers inside of each td.order, so if I delete ,for example, BBBBBBB (it has order 2 - second row) the CCCCCC will update from 3 to 2 like this:

<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>

How to reorder each td.order inside each row so it reflects the current order?

Here is my current jQuery code I am using for deleting rows now:

$('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;
});

What is the simplest way in jQuery to do this simple reordering?

Upvotes: 1

Views: 4343

Answers (2)

David Thomas
David Thomas

Reputation: 253338

I'd suggest:

$('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;
});


$('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;
});
<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>

Upvotes: 1

stefanz
stefanz

Reputation: 1326

First of all be sure that you add a custom class/id to your table to avoid useless event calling when the page have more tables, maybe one of them without this functionality.

A fiddle is here and you can see the code below.

// 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();
});

There are a lot of way to do this but modifying only the indexes after the removed element makes more sense.

Upvotes: 0

Related Questions