Question

I have a table which I want to update a single row in after an ajax update has completed. The rows all have an id which is the line number of the order. I’ve tried a variety of things, but no joy.

This is the current command…

wsHtml += '<tr id="idLine'+data[0].ORDS1_LINE+'">';
wsHtml += '<td class="RightNoWrap"  >' + data[0].ORDS1_LINE + '</td>';
.....
wsHtml += '</tr>';

$('#idLine'+data[0].ORDS1_LINE).fadeOut(1000,function(){ $(this).html(wsHtml).fadeIn(1000); });

Thanks

Answer 1

You would be better to remove the old <tr> from the DOM completely, and add in a new one at its position. This should work:

var the_new_row = $('<tr id="idLine'+data[0].ORDS1_LINE+'">\
                         <td class="RightNoWrap"  >' + data[0].ORDS1_LINE + '</td>\
                     </tr>');

$('#idLine' + data[0].ORDS1_LINE).fadeOut(1000, function() { 
    the_new_row.insertAfter($(this)).hide();
    $(this).remove();
    the_new_row.fadeIn(1000);
});

Here’s a jsFiddle > http://jsfiddle.net/ckvgu/