title: HTML table data into arrays via jQuery
body: <p>I want to extract data from an html table like</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;th&gt; Header1 &lt;/th&gt;
          &lt;th&gt; Header2 &lt;/th&gt;
          &lt;th&gt; Header3 &lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt; Value 1,1 &lt;/td&gt;
          &lt;td&gt; Value 2,1 &lt;/td&gt;
          &lt;td&gt; Value 3,1 &lt;/td&gt;
      &lt;/tr&gt;
  
      ... rows ...
  
  &lt;/table&gt;
  </code></pre>
  
  <p>and get arrays:</p>
  
  <p><li>an array for the headers<br>
  <li>a 2d array for the column values (or an array for each column)</p>
  
  <p>How can I do this using jQuery?</p>
  
  <p>I don't care to serialize it, or put it into a JSON object because I want to use it to render a chart.</p>
  
  <p><hr/>
  related General design question: </p>
  
  <p>at the moment I have something like</p>
  
  <pre><code>1. ajax query returns html table
  2. use jQuery to get values from html table
  3. render chart
  </code></pre>
  
  <p>does it make more sense to throw a JSON object back from the ajax query and then render a table and a chart from there?  </p>