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?

回答1:

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);
});

回答2:

demo updated http://jsfiddle.net/ish1301/cnsnk/

var header = Array();

$("table tr th").each(function(i, v){
        header[i] = $(this).text();
})

alert(header);

var data = Array();

$("table tr").each(function(i, v){
    data[i] = Array();
    $(this).children('td').each(function(ii, vv){
        data[i][ii] = $(this).text();
    }); 
})

alert(data);

回答3:

yet another way of doing it

var headers = jQuery('th').map(function(i,e) { return e.innerHTML;}).get();
var datas = []
jQuery.each(jQuery('tr:gt(0)'), function(i,e ) {
   datas.push(jQuery('td', e).map(function(i,e) {
                                     return e.innerHTML; 
                                  }).get()
             );
});

回答4:

Something along the lines of:

var thArray = new Array();
var contentArray = new Array();

$('th').each(function(index) {
  thArray[index] =    $(this).html();
})


$('tr').each(function(indexParent) {
  contentArray['row'+indexParent] = new Array();
    $(this).children().each(function(indexChild) {
      contentArray['row'+indexParent]['col'+indexChild] = $(this).html();
    });
});

This gives you two arrays, thArray which is an array of your headings and contentArray which is a 2d array containing rows and columns: contentArray['row1']['col0'] returns " Value 1,1"

Actually, contentArray contains the th's as well... referenced 'row0'

回答5:

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?

Yes, absolutely. Return JSON in response to your AJAX request, then you can render the table using something like jQuery Templates and use the same underlying data to generate your chart as well.

回答6:

I'm tinkering with the same thing over here, but I prefer iterating through all tables and writing the header and body arrays into properties of each table, so here's my modification to the original answer:

$(function() {
$("table").each(function(){
  var $table = $(this),
      $headerCells = $("thead th", $(this)),
      $rows = $("tbody tr", $(this));
  var headers = [],
      rows = [];


$headerCells.each(function(k,v) {
   headers[headers.length] = $(this).text();
  $table.prop("headAry", headers);
});

$rows.each(function(row,v) {
  $(this).find("td").each(function(cell,v) {
    if (typeof rows[cell] === 'undefined') rows[cell] = [];
    rows[cell][row] = $(this).text();
    $table.prop("bodAry", rows);
  });
});
console.log($(this).prop('headAry'));
console.log($(this).prop('bodAry'));  
});
});

JSbin

回答7:

I would think it would make more sense to get a json array back from the ajax call and generate your table/chart from that. With jquery templates this isn't hard at all.

回答8:

Here's a modification of Jerome Wagner's answer that uses recursive maps instead of a map inside an 'each':

http://jsbin.com/oveva3/383/edit

  var headers = $("th",$("#meme")).map(function() { 
    return this.innerHTML;
  }).get();

  var rows = $("tbody tr",$("#meme")).map(function() { 
    return [$("td",this).map(function() { 
      return this.innerHTML;     
    }).get()];
  }).get();