title: Updating table row by given id with jQuery
body: <p>I need to update a specific table row (via tr id="unique_key") after a successful AJAX call.</p>
  
  <p>HTML fragment:</p>
  
  <pre><code>&lt;a name=\"p{$product_id}\" class=\"tr{$product_id}\"&gt;&lt;/a&gt;
  &lt;tr id="p{product_id}" class="item-row"&gt;
  &lt;td&gt;&lt;h3&gt;{product_id}&lt;/h3&gt;&lt;a rel="facebox" href="ajax_url"&gt;{product_name}&lt;/a&gt;&lt;/td&gt;
  &lt;td&gt;{image_information}&lt;/td&gt;
  &lt;td&gt;{image_sortiment}&lt;/td&gt;
  &lt;td&gt;{product_status}&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>// AJAX Call
  success: function(msg){
      $('#p' + prod_id).remove();
      $('.tr' + prod_id).after(msg);
      $('#p' + prod_id + ' a[rel*=facebox]').facebox();
  }
  ...
  </code></pre>
  
  <p>What happens:</p>
  
  <ul>
  <li>The table row removed</li>
  <li>Anchors grouped into one single row (not before their <code>&lt;tr&gt;</code>'s) so my 'hook' disappears</li>
  <li>AJAX result inserted over the whole table (after my 'hook' but still a wrong place)</li>
  </ul>
  
  <p>What's wrong with my idea? How can i force jQuery to 'overwrite' the required table row?</p>