title: Create Array from table using jQuery
body: <p>I am looking to create an array using jQuery from a table with a <code>&lt;thead&gt;</code> and a <code>&lt;tbody&gt;</code></p>
  
  <p>The result I am looking for is</p>
  
  <p><code>[[20th Jan, 33], [21st Jan, 44], [22nd Jan, 5],[23rd Jan, 17]]</code></p>
  
  <p>My Table is as follows</p>
  
  <pre><code>&lt;table class="" id="bookedTable" border="1"&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Date&lt;/th&gt;
          &lt;th&gt;20th jan&lt;/th&gt;
          &lt;th&gt;21st jan&lt;/th&gt;
          &lt;th&gt;22nd jan&lt;/th&gt;
          &lt;th&gt;23rd Jan&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;Name&lt;/td&gt;
          &lt;td&gt;33&lt;/td&gt;
          &lt;td&gt;44&lt;/td&gt;
          &lt;td&gt;5&lt;/td&gt;
          &lt;td&gt;17&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>
  
  <p>My JS is as follows</p>
  
  <pre><code>$(function() {
  var $table = $("#bookedTable"),
    $headerCells = $table.find("thead th"),
    $rowCells = $table.find("tbody tr td");
  
  var headers = [],
    rows = [];
  
  $headerCells.each(function(k,v) {
   headers[headers.length] = $(this).text();
  });
  
  $rowCells.each(function(k,v) {
   rows[rows.length] = $(this).text();
  });
  
  console.log(headers);
  console.log(rows);
  });
  </code></pre>
  
  <p>I can only figure out how to console log the header and rows sepeartely and not combine them in 1 array per my desired result above. Looking for some help to resolve.</p>
  
  <p><a href="http://jsfiddle.net/kp7zK/" rel="nofollow"><strong>MY DEMO HERE</strong></a></p>