Question

我的问题是在我成功删除所选表行但是每个表行的最后一个td中的按钮值无法使用最后的javascript更新（reindex）时开始。请提供一些解决方案。

<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">test1@qwerty.com</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">test2@qwerty.com</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">test3@qwerty.com</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);
                });
            }
        }
    });
});

这是不起作用的脚本：

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

Answer 1

您遇到的问题来自each()函数中的代码。

当您迭代每个tr.eachrow元素时，您将使用$(td.thisrow)丢失关系上下文。

而是尝试使用它：

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

Answer 2

您的按钮未被重新编制索引，因为在重新编制索引时，正在删除的行仍在DOM中。尝试在fadeout完整功能 -

中重新编制索引

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

Answer 3

重置索引的那一刻，该元素可能仍然存在。结束错误的重建索引。您可以使用jquery when和then来解决此问题。

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

请参阅：http://jsfiddle.net/qt5e4jm9/2/

使用jquery删除表行后重新索引按钮元素值

3 个答案: