Datos de tabla HTML en matrices a través de jQuery

Quiero extraer datos de una tabla html como

<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> 

y get matrices:

  • una matriz para los encabezados
  • una matriz 2d para los valores de columna (o una matriz para cada columna)
  • ¿Cómo puedo hacer esto usando jQuery?

    No me importa serializarlo o ponerlo en un object JSON porque quiero usarlo para representar un gráfico.


    pregunta relacionada con el layout general:

    en este momento tengo algo así como

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

    ¿Tiene más sentido lanzar un object JSON desde la consulta ajax y luego renderizar una tabla y un gráfico desde allí?

    Algo como esto ?

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

    demo actualizada 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); 

    otra forma de hacerlo

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

    Algo como:

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

    Esto le da dos matrices, thArray que es una matriz de sus encabezados y contentArray que es una matriz 2d que contiene filas y columnas: contentArray['row1']['col0'] devuelve "Value 1,1"

    En realidad, contentArray contiene los th 's también … referencedo 'row0'

    ¿Tiene más sentido lanzar un object JSON desde la consulta ajax y luego renderizar una tabla y un gráfico desde allí?

    Si, absolutamente. Devuelve JSON en respuesta a tu request de AJAX, luego puedes renderizar la tabla usando algo así como templates de jQuery y usar los mismos datos subyacentes para generar tu tabla también.

    Estoy retocando con lo mismo aquí, pero prefiero repetir todas las tablas y escribir las matrices de encabezado y cuerpo en las properties de cada tabla, así que aquí está mi modificación a la respuesta original:

     $(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

    Pensaría que tendría más sentido recuperar una matriz json de la llamada ajax y generar su tabla / gráfico a partir de eso. Con las templates jquery esto no es difícil en absoluto.

    Aquí hay una modificación de la respuesta de Jerome Wagner que usa maps recursivos en lugar de un map dentro de un 'cada':

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