Question

I have a datagrid where I have cell Quantity and another one Price with a label at the end showing the result (price * qty). That’s work perfectly. But I can also delete a row and thats when it stop working.

This is my code

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

To replicate the problem:

1. enter numbers in each rows (you will see the result of price *
   qty)
2. Then delete row 2
3. now go to row 1 and you change the
   value and you will see the result but if you do it on row 3 it won’t
   work

So my question is why Row 3 stop working.

As a business req I need to rename the id’s to 1 and 2 and not leaving them to 1 and 3

HTML is:

<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

You’re remapping the ids and rels of the two inputs, but leaving the id of the result span untouched! (Also not changing the text of the containing div.)

See this fiddle that renumbers everything.

The changes were:

1. Added <span class="rezLabel"> to the results row and gave the result-value span a class of rezValue.

2. Changed the renumbering code to:

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