Updating table row by given id with jQuery

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 wi开发者_运维技巧th my idea? How can i force jQuery to 'overwrite' the required table row?

---

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);

---

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);

---

Nothing seems wrong with the idea.

Try just replacing the content of each TD inside that TR instead of removing and adding a new one.

---

Just it is a idea, tryout this

Your tr must be single or many, concate tr product id with constant and with increment value, like this

 <tr id="p{product_id}cnt1" class="item-row">
 <tr id="p{product_id}cnt2" class="item-row">

If you are going to delete means just the pass the tr position with product id and get the proper value to removed and display the tr in the order.

---

<table>
   <tr id="1234">
       <td>ID</td>
       <td>tracking</td>
       <td>charge</td>
  </tr>
</table>
 <form>
      <input id="modalTrackingNumber" type="text">
      <input id="modalCharge" type="text">
 </form>

store the tr id in a variable called updateID (make it a global variable) and then in the success of the ajax use the jQuery selector $( ‘tr#2 td’ ) to returns an array of td elements inside tr#2. So for Tracking# td at index 1 is assigned to tracking112 variable. Similarly td at index 2 is assigned to charge112.

   var tracking112=$('tr#' + updateID + ' td' )[1];
   var charge112= $('tr#' + updateID + ' td' )[2];

Form posted values assigned to the table tr td elements.This would update the row with values that have been posted by the form.

     $( tracking112 ).html( $( '#modalTrackingNumber' ).val() );
     $( charge112 ).html( $( '#modalCharge' ).val() );