HTML-Tabellendaten in Arrays über jQuery

Question

Ich möchte Daten aus einer HTML-Tabelle extrahieren, wie

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

und erhalten Arrays:

ein Array für die Header

ein 2D-Array für die Spaltenwerte (oder ein Array für jede Spalte)

Wie kann ich tun, um diese mit jQuery?

Ich interessiere mich nicht, es zu serialisieren, oder es in ein JSON-Objekt gesetzt, weil ich es benutzen will ein Diagramm zu machen.

---

verwandte Allgemeine Design Frage:

im Moment habe ich so etwas wie

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

macht es mehr Sinn, ein JSON-Objekt zurück aus der Ajax-Abfrage zu werfen und dann eine Tabelle und ein Diagramm von dort zu machen?

    

Answer 1

Beispiel ?

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

noch eine andere Möglichkeit, es zu tun

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

Etwas entlang der Linien von:

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

Das gibt Ihnen zwei Arrays, thArray, die ein Array von Überschriften und contentArray, die ein 2D-Array mit Zeilen und Spalten: contentArray['row1']['col0'] returns „Wert 1,1“

Tatsächlich enthält contentArray die auch die th ... referenzierten 'ROW0'

Answer 5

  

macht es mehr Sinn, ein JSON-Objekt zurück aus der Ajax-Abfrage zu werfen und dann einen Tisch machen und ein Diagramm von dort?

Ja, absolut. Rückkehr JSON als Antwort auf Ihren AJAX-Request, dann können Sie die Tabelle mit so etwas wie jQuery Vorlagen machen und die gleichen zugrunde liegenden Daten verwenden, um Ihr Diagramm als auch zu erzeugen.

Answer 6

Ich bin mit der gleichen Sache bastle hier, aber ich ziehe das Iterieren durch alle Tabellen und Schreiben der Header und Body-Arrays in Eigenschaften jeder Tabelle, so ist hier meine Änderung auf die ursprüngliche Antwort:

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

Ich würde denken, wäre es sinnvoll, eine JSON-Array zurück von dem Ajax-Aufruf zu erhalten und Ihre Tabelle / Grafik aus, dass zu erzeugen. Mit jQuery Vorlagen ist dies nicht schwer.

Answer 8

Hier ist eine Modifikation von Jerome Wagners Antwort, dass Anwendungen Karten anstelle einer Karte rekursiv innerhalb eines ‚jeder‘:

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