CODEWITHSUNDEEP
jquery
Karls
Karls

Reputation: 93

re-index button element value after removing table row with jquery

My problem is start when i remove the selected table row successfully but the button value in the last td on each table row is cannot update (reindex) with the javascript at the end. Please provide some solution on this.

<table id="sumTable" class="table table-hover table-condensed">
<thead>
<tr>
<th>Email</th>
<th>Type</th>
<th>Period</th>
<th>Discount</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr class="eachrow">
<td class="v-align-middle">[email protected]</td>
<td class="v-align-middle">Student</td>
<td class="v-align-middle">6 month</td>
<td class="v-align-middle">10%</td>
<td class="v-align-middle thisrow">
<button class="btn btn-small btn-link btn-del" value="0" name="subrow[]" type="button" sourceindex="2">
</td>
</tr>
<tr class="eachrow">
<td class="v-align-middle">[email protected]</td>
<td class="v-align-middle">Student</td>
<td class="v-align-middle">6 month</td>
<td class="v-align-middle">10%</td>
<td class="v-align-middle thisrow">
<button class="btn btn-small btn-link btn-del" value="1" name="subrow[]" type="button" sourceindex="3">
</td>
</tr>
<tr class="eachrow">
<td class="v-align-middle">[email protected]</td>
<td class="v-align-middle">Teacher</td>
<td class="v-align-middle">3 month</td>
<td class="v-align-middle">10%</td>
<td class="v-align-middle thisrow">
<button class="btn btn-small btn-link btn-del" value="2" name="subrow[]" type="button" sourceindex="4">
<i class="text-danger fa fa-times"></i>
</button>
</td>
</tr>
</tbody>
</table>

$('#sumTable').on('click', '.btn-del', function(e) {
    var tr = $(this).closest('tr');
    e.preventDefault();

    bootbox.confirm({
        title: '<?php echo translate('title_confirm_subdel'); ?>',
        message: '$<?php echo translate('text_confirm_subdel'); ?>',
        buttons: {
            'cancel': {
                label: '<?php echo translate('button_cancel'); ?>',
                className: 'btn-default'
            },
            'confirm': {
                label: '<?php echo translate('button_remove'); ?>',
                className: 'btn-danger'
            }
        },
        callback: function(result) {
            if (result) {
                $.ajax({
                    url: 'inc/token-recalc.php',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        'removeRow': rowData,
                        'tableData': $('#orderPoint').val()
                    },
                    success: function(response) {
                        console.log(response);
                        var success = response.success;
                        var $orderDesc = response.orderDesc;
                        var $orderPoint = response.orderPoint;
                        var $orderAmount = response.orderAmount;
                        var $sumWell = response.sumWell;
                        if (success) {
                            $('#orderDesc').attr('value', $orderDesc);
                            $('#orderPoint').attr('value', $orderPoint);
                            $('#orderAmount').attr('value', $orderAmount);
                            $('#sumWell').html( $sumWell );
                        }
                    }
                });
                tr.fadeOut(400, function(){
                    tr.remove();
                });

                var sumTable = $('#sumTable > tbody > tr.eachrow');
                $(sumTable).each(function(i) {
                    $('td.thisrow', this).find('button').val(i);
                });
            }
        }
    });
});

this is the script that not working:

var sumTable = $('#sumTable > tbody > tr.eachrow');
$(sumTable).each(function(i) {
    $('td.thisrow', this).find('button').val(i);
});

Upvotes: 0

Views: 1822

Answers (3)

John C
John C

Reputation: 3112

Your buttons are not being re-indexed because the row that's being removed is still in the DOM when the re-indexing happens. Try doing your re-indexing in your fadeout complete function -

tr.fadeOut(400, function(){
  tr.remove();
  var sumTable = $('#sumTable > tbody > tr.eachrow');
    sumTable.each(function(i) {
      $('td.thisrow', this).find('button').val(i);
    }); 
});

Upvotes: 1

Sam Segers
Sam Segers

Reputation: 1951

The moment you are resetting the indexes, the element may still exist. Ending up in wrong reindexing. You can use the jquery when and then to solve this.

var resetNums = function(){
    $('#sumTable button').each(function(i) {
        $(this).html('button '+i);
    });
}
$(document).ready(function() {
    $('#sumTable').on('click', '.btn-del', function(e) {
        var tr = $(this).closest('tr');
        e.preventDefault();    
        tr.fadeOut(400, function(){
            $.when(tr.remove()).then(resetNums());
        });         
    });
    resetNums();
});

see: http://jsfiddle.net/qt5e4jm9/2/

Upvotes: 0

Jackson
Jackson

Reputation: 3518

The problem you are having is coming from the code within the each() function.

When you are iterating over each tr.eachrow element, you are losing the relational context by using $(td.thisrow).

Instead try using this:

$('#sumTable tr.eachrow').each(function(i){
    $(this).find('button').val(i);
});

Upvotes: 1

Related Questions