sova sova - 4 years ago 431
Javascript Question

HTML table data into arrays via jQuery

I want to extract data from an html table like

<table>
<tr>
<th> Header1 </th>
<th> Header2 </th>
<th> Header3 </th>
</tr>
<tr>
<td> Value 1,1 </td>
<td> Value 2,1 </td>
<td> Value 3,1 </td>
</tr>

... rows ...

</table>


and get arrays:

  • an array for the headers

  • a 2d array for the column values (or an array for each column)

    How can I do this using jQuery?

    I don't care to serialize it, or put it into a JSON object because I want to use it to render a chart.



    related General design question:

    at the moment I have something like

    1. ajax query returns html table
    2. use jQuery to get values from html table
    3. render chart


    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?

  • Answer Source

    Something like this?

    $(function() {
    
      var headers = $("span",$("#tblVersions")).map(function() { 
        return this.innerHTML;
      }).get();
    
      var rows = $("tbody tr",$("#tblVersions")).map(function() { 
        return [$("td:eq(0) input:checkbox:checked",this).map(function() { 
          return this.innerHTML;     
        }).get()];
      }).get();
    
      alert(rows);
    });
    
    Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download