title: Using jquery to copy a portion of a table in the most optimized way
body: <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>