title: HTML table to array javascript
body: <p>I found this question from before, here's the answer but I can't make it work.
  So the question is: I want to get all the values from the table into array, using javascript</p>
  
  <p>HTML table:</p>
  
  <pre><code>&lt;table id="cartGrid"&gt;
    &lt;thead&gt;
         &lt;tr&gt;
            &lt;th&gt;Item Description&lt;/th&gt;
            &lt;th&gt;Qty&lt;/th&gt;
            &lt;th&gt;Unit Price&lt;/th&gt;
            &lt;th&gt;Ext Price&lt;/th&gt;
         &lt;/tr&gt;
    &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;&lt;td&gt;Old Lamp&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;107.00&lt;/td&gt;&lt;td&gt;107.00&lt;/td&gt;
      &lt;tr&gt;&lt;td&gt;Blue POst&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;7.00&lt;/td&gt;&lt;td&gt;14.00&lt;/td&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>JavaScript: </p>
  
  <pre><code>var myTableArray = [];
  $("table#cartGrid tr").each(function() {
      var arrayOfThisRow = [];
      var tableData = $(this).find('td');
      if (tableData.length &gt; 0) {
          tableData.each(function() { arrayOfThisRow.push($(this).text()); });
          myTableArray.push(arrayOfThisRow);
      }
  });
  
  alert(myTableArray);
  </code></pre>
  
  <hr>
  
  <p>I found another option of doing it - but both return an empty array</p>
  
  <pre><code>var tableData = new Array();    
  $('#cartGrid tr').each(function(row, tr){
      tableData[row]={
          "ItemDescription" : $(tr).find('td:eq(0)').text()
          , "Qty" :$(tr).find('td:eq(1)').text()
          , "UnitPrice" : $(tr).find('td:eq(2)').text()
          , "ExtPrice" : $(tr).find('td:eq(3)').text()
      }
  }); 
  tableData.shift();  // first row is the table header - so remove
  </code></pre>