HTML-Tabellendaten in Arrays über jQuery
-
30-09-2019 - |
Frage
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:
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?
Lösung
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);
});
Andere Tipps
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);
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()
);
});
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'
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.
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'));
});
});
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.
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();