Javascript ligne de la table afficher/masquer
J'ai créé un tableau à l'aide de Javascript/Ossature. Lors de l'utilisation d'un modèle pour afficher les lignes j'ai une ligne visible et l'autre caché depuis le début. Quand je clique sur une table spécifique, je veux qu'il 'étendre' en montrant le caché ligne placé sous le visible. Je suis également à l'aide d'une boucle pour créer le tableau de sorte que toutes les lignes ont la même classe et id. Jusqu'à présent j'ai utilisé ce pour développer et réduire les lignes:
expandRow: function() {
if (document.getElementById('hiddenText').style.display == 'none' ) {
document.getElementById('hiddenText').style.display = '';
}
else if (document.getElementById('hiddenText').style.display == '') {
document.getElementById('hiddenText').style.display = 'none';
}
Cependant, cette solution ne s'ouvre et se ferme de la même ligne du tableau (celui du haut) n'importe quelle ligne je clique sur. J'ai besoin d'aide pour trouver une solution pour agrandir/réduire la ligne spécifique que je clique sur.
- Consultez ce un stackoverflow.com/a/32474501/3583859
Vous devez vous connecter pour publier un commentaire.
Id doit être unique dans la page. Si ils ne sont pas uniques, alors votre JavaScript, il suffit de sélectionner la première occurence, dans ce cas, la première ligne avec "hiddenText" comme l'ID.
Vous devez sélectionner votre ligne de votre choix via une sorte de référence. Alors, peut-être dans la boucle qui crée la table, vous pouvez inclure un différentiel, l'indice de la ligne
id
s, puis sélectionnez la ligne appropriée par l'intermédiaire de cette méthode.Je ne connais pas le fonctionnement interne de la façon dont vous avez construit la vue. En supposant que
this.$el
est la table qui vous intéresse ci-dessous le code que j'écriraiCode ci-dessus est écrit avec des charges de l'assomption, alors, probablement, il peut être mal. Mais c'est la façon dont vous devriez écrire votre point de vue
Votre script est en cours d'arrêt au premier élément avec l'ID parce qu'ils ne sont pas uniques. Vous devez avoir votre boucle de créer dynamiquement les ID unique. Pour y parvenir, je voudrais utiliser un compteur de nombre entier variable (var compteur) pour ajouter un numéro unique à la fin de l'ID. J'ai ensuite modifier l'état de votre déclaration si la chercher par le nom de la classe au lieu de l'ID (getElementsByClassName('que rowexpand')) et de les stocker dans une variable (var hasClassRowExpand). Sur l'événement onClick, vous pouvez obtenir une référence à l'ID de la ligne sur laquelle vous avez cliqué et ensuite une boucle sur chaque élément dans hasClassRowExpand. Lorsque vous appuyez sur l'index contenant l'élément avec l'ID correspondant, de manipuler les propriétés d'affichage en fonction de son état actuel.
- Je utiliser un CSS définition de la classe comme ça...
... utiliser JQuery toggleClass de renverser l'état.