javascript - jQuery - .each() 动态删除的行 - 编号关闭

Question

JSFiddle:https://jsfiddle.net/dxhen3ve/4/

大家好，

一段时间以来我一直在尝试解决这个问题。

本质上，我有一个包含行的表。您可以添加新行(效果很好)。但是，在删除行时，我想对其下面的所有行重新编号(包括其中的所有输入名称/ID)。

这工作正常，因为我在第一次单击任何行的“删除”时就得到了它。比如说，如果您有第 0-4 行并删除第 1 行，那么您现在将有第 0-3 行，它们将是编号正确 - 但是，之后如果您在另一行上再次单击“删除”，编号不会更新

索引在某种程度上变得困惑，它几乎似乎没有意识到我已经从 DOM 中删除了一个元素..当我 console.log 索引时，一切看起来都很好。

举个例子: - 添加 5 行 (0-4) - 删除第 1 行(下面的行将按其应有的方式更新)。 - 删除新的行 #1，您将看到行 #2 取代它的位置，而不是更改为行 #1。 - 在函数“renumber_budget_rows”中，if 语句似乎在第 2 行中被跳过，尽管我觉得它应该满足条件(并且如果我 console.log(item) 则存在)

我错过了什么？ https://jsfiddle.net/dxhen3ve/4/

** 更新:只是想更新一下，我有一个真正有效的解决方案，这太棒了!然而，我更感兴趣的是知道为什么我的解决方案失败了。目前，从正确答案来看，我所拥有的最好的结果是我的索引未对齐。我要以新的眼光来看待他们。

HTML

                <script type="text/template" id="budget_row-template">                  

                <tr id="budget_row-{{index}}" class="budget-row" data-budget-index="{{index}}">

                    <td class="budget-line">{{index}}</td>
                    <td><input type="text" name="budget_description-{{index}}" id="budget_description-{{index}}" class="budget-description" /></td>
                    <td><input type="text" name="budget_amount-{{index}}" id="budget_amount-{{index}}" class="budget-amount" /></td>
                    <td>
                        <select name="budget_costcode-{{index}}" id="budget_costcode-{{index}}" class="budget-costcode">
                            <option>-- Select Cost Code</option>
                        </select>
                    </td>

                    <td><a href="#" id="buget_row-{{index}}-addparent" class="table-btn neutral add-budget-child" title="Add Line: {{index}} Child" data-budget-index="{{index}}"><i class="fa fa-share"></i></a></td>
                    <td><a href="#" id="budget_row-{{index}}-trash" data-budget-index="{{index}}" class="table-btn danger trash-budget-row" title="Delete Line: {{index}}">remove</a></td>

                </tr>

            </script>
            <div class="table-scroll-container">
                <table class="table table-striped table-bordered table-hover tablesorter" id="budget-display">

                    <thead>
                        <tr>                    
                            <th>Line #</th>
                            <th>Description</th>
                            <th>Amount</th>
                            <th>Cost Code</th>
                            <th data-sorter="false"></th>
                            <th data-sorter="false"></th>
                        </tr>
                    </thead>

                    <tbody id="test">

                        <tr id="budget_row-0" class="budget-row" data-budget-index="0">

                            <td class="budget-line">0</td>
                            <td><input type="text" name="budget_description-0" id="budget_description-0" class="budget-description" /></td>
                            <td><input type="text" name="budget_amount-0" id="budget_amount-0" class="budget-amount" /></td>
                            <td>
                                <select name="budget_costcode-0" id="budget_costcode-0" class="budget-costcode">
                                    <option>-- Select Cost Code</option>
                                </select>
                            </td>
                            <td><a href="#" id="buget_row-0-addparent" class="table-btn neutral add-budget-child" title="Add Line: 0 Child" data-budget-index="0"><i class="fa fa-share"></i></a></td>
                            <td></td>

                        </tr>

                    </tbody>

                </table>
            </div>


            <div class="text-align-center">
                <a href="#" class="btn btn-success add-budget-row"><i class="icon icon-plus icon-white"></i> Add Line Item</a><br />
            </div>

JS

function renumber_budget_rows(removed) {
    $('#budget-display tbody .budget-row').each(function(indite, item) {
        var ti = $(item).data('budget-index');
  if( ti > removed ) {
            ti--;
            //console.log(item);
            $(item).attr('id', 'budget_row-'+ti);
            $(item).attr('data-budget-index', ti);
            $(item).find('.budget-line').html(ti);
            $(item).find('.budget-description').attr({ 'name': 'budget-description-'+ti, 'id': 'budget-description-'+ti });
            $(item).find('.budget-amount').attr({ 'name': 'budget-amount-'+ti, 'id': 'budget-amount-'+ti });
            $(item).find('.budget-costcode').attr({ 'name': 'budget-costcode-'+ti, 'id': 'budget-costcode-'+ti });
            $(item).find('.add-budget-child').attr({ 'id': 'budget_row-addparent-'+ti, 'data-budget-index': ti });
            $(item).find('.trash-budget-row').attr({ 'id': 'budget_row-'+ti+'-trash' });
            $(item).find('.trash-budget-row').attr('data-budget-index', ti);
        }
    });
}


var budget_index = 0;
$('.add-budget-row').click(function(e) {
    budget_index++;
    e.preventDefault();
    var budget_html = $('#budget_row-template').html();
    budget_html = budget_html.replace(/{{index}}/g, budget_index);
    $('#budget-display tbody').append(budget_html);




});
$('#budget-display').on('click', '.trash-budget-row', function(e) {
    var removed = $(this).data('budget-index');
    $(this).closest('tr').remove();
    console.log(removed);


    renumber_budget_rows(removed);
    budget_index--;

});

Answer 1

当您删除行时，删除行后，您可以使用 .each() 函数迭代每个 tr，并根据索引 i 更改属性值。

$('#budget-display').on('click', '.trash-budget-row', function(e) {
        var removed = $(this).data('budget-index');
        $(this).closest('tr').remove();
        $('tbody tr').each(function(i){
          $(this).find('td').eq(0).text(i);
          $(this).attr("data-budget-index",i);
          $(this).attr("id","budget-row-" + i);
        });    
    budget_index--;    
});

工作示例:https://jsfiddle.net/DinoMyte/dxhen3ve/5/