Updating table row by given id with jQuery

Question

I need to update a specific table row (via tr id="unique_key") after a successful AJAX call.

HTML fragment:

<a name=\"p{$product_id}\" class=\"tr{$product_id}\"></a>
<tr id="p{product_id}" class="item-row">
<td><h3>{product_id}</h3><a rel="facebox" href="ajax_url">{product_name}</a></td>
<td>{image_information}</td>
<td>{image_sortiment}</td>
<td>{product_status}</td>
</tr>

Javascript:

// AJAX Call
success: function(msg){
    $('#p' + prod_id).remove();
    $('.tr' + prod_id).after(msg);
    $('#p' + prod_id + ' a[rel*=facebox]').facebox();
}
...

What happens:

• The table row removed
• Anchors grouped into one single row (not before their <tr>'s) so my 'hook' disappears
• AJAX result inserted over the whole table (after my 'hook' but still a wrong place)

What's wrong with my idea? How can i force jQuery to 'overwrite' the required table row?

Answer 1

You can't have anchors inside the table but outside the table rows. All content in a table has to be inside the table cells. If you put content outside the cells, browsers try to fix the code so that it's possible to display it, usually by moving it to after the table.

Manipulating content in a table can be tricky, it can act up if you add rows as html chunks rather than row elements. Use the jQuery function to create elements from the string that you get.

var row = $(msg);
$('#p' + prod_id).replaceWith(row);

Answer 2

You can not have any non-table elements directly inside <table> but not inside <td> or <th>. Browsers won't render it correctly.

So you have to place anchors in another <tr><td> .. </td></tr>

But if they are there only to remove row and create new one, you can try replaceWith() instead:

$('#p' + prod_id).replaceWith(msg);