Une itération à travers les cellules d'un tableau à l'aide de jquery
J'ai une table contenant un nombre variable de colonnes. J'ai écrit une fonction pour itérer sur chaque cellule de chaque ligne pour effectuer les opérations suivantes:
- Vérifier la présence d'une entrée
- Récupérer la valeur de l'entrée
- Ajouter un graphique à n'importe quelle cellule où la condition #1 est évaluée à true
Voici mon code:
function addPieCharts() {
var htmlPre = "<span class='inlinesparkline' values='";
var htmlPost = "'></span>"
var colors = ["red", "blue"];
$("#MarketsTable tr").each(function () {
$('td').each(function () {
var value = $(this).find(":input").val();
var values = 100 - value + ', ' + value;
if (value > 0) {
$(this).append(htmlPre + values + htmlPost);
}
})
})
$('.inlinesparkline').sparkline('html', { type: 'pie', sliceColors: colors });
}
Les étapes 1 à 3 sont essentiellement travailler comme décrit. Lorsque cela va les diagrammes circulaires sont ajoutés à la bonne cellules présentant les valeurs correctes. Mon problème est que je m'attends simplement un graphique en secteurs par cellule où il existe une entrée. Cependant, je n camemberts par cellule où n est égal au nombre de colonnes dans la table. Je pense que je suis en utilisant jQuery méthode each() d'une manière incorrecte. Quelqu'un peut-il me dire ce que j'ai fait de mal?
OriginalL'auteur hughesdan | 2012-02-03
Vous devez vous connecter pour publier un commentaire.
Lorsque vous sélectionnez
td
passer le contexte tr (this
), de sorte qu'il va cherchertd
seulement dans latr
. Essayez cette.$(this).find("td")
.Oui, c'était cela. De travail maintenant. Drôle, j'ai essayé quelque chose de semblable, mais qui était à l'arrêt sur la syntaxe (par exemple, ce + 'td'). Merci pour la réponse!
Assurez-vous d'accepter la réponse.
Oui, de même que les œuvres.
OriginalL'auteur ShankarSangoli
Voici comment modifier votre code:
#MarketsTable td:has(:input)
: ce sélecteur trouverez TD qui a au leats un élément d'ENTRÉE à l'intérieur depas besoin de stocker vos pièces de html dans les variables de l'OMI, il suffit de créer l'élément en cas de besoin et l'ajouter à la TD
Voici le code modifié:
DÉMO
Lourde les sélecteurs ne sont pas efficaces. .each() est moins efficace qu'un...en boucle. Honnêtement, je ne sais pas où sera la plus efficace. Cela dépend de la taille de votre table est, je suppose.
Merci. +1 parce que j'ai appris quelques choses de votre réponse. Je ne savais pas qu'on pouvait utiliser un " a " dans un sélecteur.
Sélecteurs jQuery
OriginalL'auteur Didier Ghys