Question

我有一个数据网格，其中我有单元格数量和另一个价格，最后显示结果的标签（价格*数量）。那是完美的。但我也可以删除一行，当它停止工作时。

这是我的代码

http://jsfiddle.net/bizonbytes/SYwpy/24/

要复制问题：

在每行中输入数字（您将看到价格的结果* 数量）
然后删除第2行
现在转到第1行，然后更改值，您将看到结果，但如果您在第3行执行，则不会工作

所以我的问题是为什么第3行停止工作。

作为业务需求，我需要将id重命名为1和2，而不是将它们留给1和3

HTML是：

<div class="row_table row_service_table" id="service_row_1">
    <div class="cell celldata cell_service_data"><input type="text" class="quantity_row" id="quantity_row_1" rel="1"/></div>
    <div class="cell celldata cell_service_data"><input type="text" class="price_row" id="price_row_1" rel="1"/></div>
    <div class="cell celldata cell_service_data"><a href="javascript:void(0)" class="delete_service_row" id="delete_service_row_1" rel="1">Delete row 1</a></div>
    <div class="cell celldata cell_service_data">Result row 1=<span id="total_1"></span></div>
</div>

etc.

使用Javascript：

$(".delete_service_row").click(function(){
    var rowId = $(this).attr('rel');

    $('#service_row_' + rowId).remove();

    // iterates through each of the elements matched by the selector
    $('.row_service_table').each(
        // i represents the index of each of the elements
        function(i){
              // sets the id of each of the returned elements
              // to the string concatenated with the expression 'i + 1'
            this.id = 'service_row_' + (i+1);

            $(this).children('.cell_service_data').children('.quantity_row').attr('id', 'quantity_row_' + (i+1));
            $(this).children('.cell_service_data').children('.quantity_row').attr('rel', (i+1));
            $(this).children('.cell_service_data').children('.quantity_row').attr('name', 'quantity_row_' + (i+1));

            $(this).children('.cell_service_data').children('.price_row').attr('id', 'price_row_' + (i+1));
            $(this).children('.cell_service_data').children('.price_row').attr('rel', (i+1));
            $(this).children('.cell_service_data').children('.price_row').attr('name', 'price_row_' + (i+1));
      });
});

$('.quantity_row,.price_row').live('change', function(){
    var rowId = $(this).attr('rel');

    // Lets update the total line
    var total = parseFloat($('#quantity_row_' + rowId).val()) * parseInt($('#price_row_' + rowId).val());
    $('#total_' + rowId).text(total);
});

Answer 1

您正在重新映射两个输入中的id和rel，但保持结果范围的id不变！（也不要更改包含div的文本。）

See this fiddle that renumbers everything

变化是：

将<span class="rezLabel">添加到结果行，并将结果值范围设为rezValue。

将重新编号的代码更改为：

$('.row_service_table').each (
    // i represents the index of each of the elements
    function(i){
          // sets the id of each of the returned elements
          // to the string concatenated with the expression 'i + 1'
        this.id         = 'service_row_' + (i+1);
        var baseNode    = $(this).children('.cell_service_data');

        baseNode.children('.quantity_row').attr('id', 'quantity_row_' + (i+1));
        baseNode.children('.quantity_row').attr('rel', (i+1));
        baseNode.children('.quantity_row').attr('name', 'quantity_row_' + (i+1));

        baseNode.children('.price_row').attr('id', 'price_row_' + (i+1));
        baseNode.children('.price_row').attr('rel', (i+1));
        baseNode.children('.price_row').attr('name', 'price_row_' + (i+1));

        baseNode.children('a').text('Delete row ' + (i+1));
        baseNode.children('a').attr('id', 'delete_service_row_' + (i+1));
        baseNode.children('a').attr('rel', (i+1));

        baseNode.children('.rezLabel').text('Result Row ' + (i+1) + ' = ');
        baseNode.children('.rezValue').attr('id', 'total_' + (i+1));
} );

Answer 2

您还需要在total_3中将ID total_2重命名为each()。更改事件会尝试更新范围total_2，但该范围不存在，仅存在total_1和total_3。

Answer 3

每当您删除任何行时，您也会更改多个对象的id和rel属性。你不必那样做。删除$('.row_service_table').each块，它应该可以工作。

Answer 4

调用remove（）后，无需重置标识符！我已经更新了小提琴，请查看。

JQuery //删除id事件后不触发

4 个答案: