jQuery

Question

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

大家好，

一段时间以来，我一直在努力解决这个问题。

基本上，我有一个带行的 table。您可以添加新行（工作正常）。但是，在删除行时，我想重新编号它下面的所有行（包括它们在 names/ids 内的所有输入）。

这很好用，因为我第一次点击任何行的 "remove" 时..比如说，如果你有第 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/

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

jQuery - .each() over dynamically removed rows - numbering is off

javascript

each

dynamic