Using jquery to copy a portion of a table in the most optimized way
<p>I am using JQuery to manipulate a page which I do not have access to modify server-side.  One of the main things I need to do is create a copy of just a sub-section of one of the tables on the page.  More specifically, I need to create 2 tables, one which is a copy of just the first two rows of the table and another which is just the first column.</p>

<p>After optimizing it as far as I could, I'm fairly happy with the performance of the row copy but the column copy is still a bit on the slow side.  </p>

<p>I have the following, where sourceTable is the original table and titleColBody is the tbody of a new table created earlier:</p>

<pre><code>sourceTable.find("tr").each(function(){
   titleColBody.append(
      $("&lt;tr&gt;&lt;/tr&gt;").append($(this).children(":first").clone())
   );
});
</code></pre>

<p>On a table with roughly 50 rows and a huge number of columns, this takes approx. 350ms in IE8.  Not terrible, but I would like to bring this down a little if possible.  </p>

<p><strong>My question is if there is a more efficient way of doing this in JQuery.</strong></p>

<p>Similarly, I create the copy of the first 2 rows of the table as below.</p>

<pre><code>headerTable.find("tbody")
   .append(sourceTable.find("tr:eq(0)").clone())
   .append(sourceTable.find("tr:eq(1)").clone());
</code></pre>

<p>This is fairly quick, however if there is a better way of doing it I would be happy to hear it.</p>

<p>Any optimization at all would be greatly appreciated.</p>
