HTML table data into arrays via jQuery

Question

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 the arrays:

array for headers
2d array for column values ​​(or an array for each column)

How to do it using jQuery?

I do not need to serialize it or put it in a JSON object, because I want to use it to render a chart.

related to general design:

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 sense to throw a JSON object from an ajax request and then display a table and chart?

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

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

Answer 3

another way to do 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() ); }); 

Answer 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 headers and contentArray , which is an array of 2d, containing rows and columns: contentArray['row1']['col0'] returns the value "1.1"

Actually, the contentArray contains th , and also ... refers to 'row0'

Answer 5

does it make sense to throw the JSON object back from the ajax request and then render the table and chart from there?

Yes, absolutely. Return JSON in response to your AJAX request, then you can display the table using something like jQuery templates and use the same basic data to generate your chart.

Answer 6

I also do the same, but prefer to iterate over all the tables and write the header and body arrays to the properties of each table, so here is my modification of 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

Answer 7

I would have thought it would be wiser to return a json array from an ajax call and create a table / diagram from this. With jquery templates, this is not at all complicated.

Answer 8

Here's a modification of Jerome Wagner's answer, which uses recursive maps instead of the map inside "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();