les données de table HTML dans des tableaux via jQuery
-
30-09-2019 - |
Question
Je veux extraire des données d'une table html comme
<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>
et obtenir des tableaux:
Comment puis-je faire cela en utilisant jQuery?
Je ne se soucient pas de sérialisation, ou le mettre dans un objet JSON parce que je veux l'utiliser pour rendre un graphique.
question connexe de conception générale:
au moment où j'ai quelque chose comme
1. ajax query returns html table
2. use jQuery to get values from html table
3. render chart
fait-il plus judicieux de jeter un objet JSON retour de la requête ajax, puis rendre une table et un graphique à partir de là?
La solution
Quelque chose comme ça ?
$(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);
});
Autres conseils
Démo mise à jour 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);
encore une autre façon de le faire
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()
);
});
Quelque chose le long des lignes de:
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();
});
});
Cela vous donne deux tableaux, thArray
qui est un tableau de vos rubriques et contentArray
qui est un tableau 2D contenant des lignes et des colonnes: retourne contentArray['row1']['col0']
« Valeur 1,1 »
En fait, contentArray contient aussi ... Referenced 'row0'
duth
fait-il plus judicieux de jeter un objet JSON retour de la requête ajax, puis rendre une table et un graphique à partir de là?
Oui, tout à fait. Retour JSON en réponse à votre demande d'AJAX, vous pouvez rendre la table en utilisant quelque chose comme jQuery Templates et utiliser les mêmes données sous-jacentes pour générer votre graphique ainsi.
Je suis bricoler avec la même chose ici, mais je préfère itérer à travers toutes les tables et à écrire l'en-tête et les tableaux corps dans les propriétés de chaque table, voici donc ma modification à la réponse originale:
$(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'));
});
});
Je pense qu'il serait plus logique d'obtenir un tableau JSON retour de l'appel ajax et de générer votre table / tableau de cela. Avec des modèles jquery ce n'est pas difficile du tout.
Voici une modification de la réponse de Jérôme Wagner que les utilisations récursive cartes au lieu d'une carte dans un « chaque »:
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();