Je veux extraire des données d'une table HTML comme et obtenir des tableaux: p> p> Comment puis-je faire cela en utilisant jQuery? p>
Je ne me soucie pas de le sérialiser, ou de le mettre dans un objet JSON parce que je veux l'utiliser pour rendre un graphique. P>
p> pour le moment j'ai quelque chose comme p>
Li>
Question de conception générale connexe:
1. ajax query returns html table
2. use jQuery to get values from html table
3. render chart
9 Réponses :
Je penserais qu'il serait plus logique de récupérer un tableau JSON de l'appel Ajax et de générer votre table / tableau à partir de celui-ci. Avec des modèles de jQuery ce n'est pas du tout difficile.
Quelque chose le long des lignes de: ceci vous donne deux tableaux, effectivement, ContentArraray contient le Tharray qui est une matrice de vos titres et conteneur qui est une matrice 2D contenant des lignes et des colonnes contresarray ['row1'] ['Col0'] renvoie "valeur 1,1" TH aussi ... référencé 'Row0'
Frais. Je suis toujours fragile sur les sélecteurs ... Si j'ai ma table dans une variable appelée tablehtml Comment accéder à chaque
Ummm ... Comme en vous avez enregistré la table dans une variable JavaScript?
droit. Bien que j'ai pu comprendre l'exemple de Simshaun
Assez juste :) Je pense que si la table a été stockée dans une variable JS, elle serait alors une chaîne et ne pouvait pas être traversée par des sélecteurs JQuery ... sauf si j'ai mal compris :)
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);
});
Cela a-t-il plus de sens de remettre un objet JSON de la requête Ajax, puis de rendre une table et un tableau de là?
Oui, absolument. Retournez JSON en réponse à votre demande AJAX, vous pouvez également rendre la table à l'aide de quelque chose comme des modèles JQuery et utilisez les mêmes données sous-jacentes pour générer également votre graphique.
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()
);
});
Voici une modification de la réponse de Jerome Wagner qui utilise des cartes récursives au lieu d'une carte à l'intérieur d'une "chacune":
Je branlant avec la même chose ici, mais je préfère itération à travers toutes les tables et écrire les matrices d'en-tête et de carrosserie dans les propriétés de chaque table, voici ma modification de la réponse d'origine:
$(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'));
});
});
Utilisez cette ligne de code:
var arrays = [];
$('table').eq(0).find('tr').each((r,row) => arrays.push($(row).find('td,th').map((c,cell) => $(cell).text()).toArray()))