title: Re-arrange an HTML table with jQuery based on a given array of row IDs
body: <p>I have an HTML table in which each data row has a unique <code>id</code> attribute. I am writing a script that polls a server for data and uses the results it gets to re-sort the table. From the server, I receive an array like this:</p>
  
  <pre><code>var order_arr = [6, 4, 2, 1, 5, 3]
  </code></pre>
  
  <p>Which I want to use to visually re-sort some table data like this:</p>
  
  <pre><code>&lt;tr id="user-1"&gt;...&lt;/tr&gt;
  &lt;tr id="user-2"&gt;...&lt;/tr&gt;
  &lt;tr id="user-3"&gt;...&lt;/tr&gt;
  &lt;tr id="user-4"&gt;...&lt;/tr&gt;
  &lt;tr id="user-5"&gt;...&lt;/tr&gt;
  &lt;tr id="user-6"&gt;...&lt;/tr&gt;
  </code></pre>
  
  <p>So that it appears to the user like this:</p>
  
  <pre><code>&lt;tr id="user-6"&gt;...&lt;/tr&gt;
  &lt;tr id="user-4"&gt;...&lt;/tr&gt;
  &lt;tr id="user-2"&gt;...&lt;/tr&gt;
  &lt;tr id="user-1"&gt;...&lt;/tr&gt;
  &lt;tr id="user-5"&gt;...&lt;/tr&gt;
  &lt;tr id="user-3"&gt;...&lt;/tr&gt;
  </code></pre>
  
  <p>I wrote some <a href="http://jsfiddle.net/hans/9fW6P/1/" rel="nofollow">jQuery code on jsFiddle</a> to do this, but I don't know if it's the best technique. It fetches the array of <code>&lt;tr&gt;</code> elements and sorts them based on the corresponding index of each row's ID. It ends with a <code>.html()</code> call that just replaces the whole table body content.</p>
  
  <p>So.. tl;dr:</p>
  
  <ol>
  <li>Is <a href="http://jsfiddle.net/hans/9fW6P/1/" rel="nofollow">this code</a> the best way to visually
  re-sort an HTML table given an array
  holding the desired order of row
  IDs?</li>
  <li>How can I make this animated? I
  was thinking I could write this as a
  CSS hack instead, in which each
  table row has an absolute position
  and I could just run <code>.animate()</code>
  after calculating which position
  each row should hold. Thoughts vs.
  my current code?</li>
  </ol>