Jquery/javascript onclick afficher la ligne suivante

Question

J'ai une table qui a une ligne qui est cachée en utilisant display: none. Je veux montrer la ligne quand un bouton est cliqué. Comment puis-je faire ceci??

<table> 

<tr> 
<td> 
<button class="shownextrow">Show Next Row</button> 
</td> 
</tr> 

<tr style="display:none"> 
<input type="text" name="input"/> 
</tr> 

</table> 

Answer 1

Vous pouvez lier au bouton et le trouvent relativement, comme ceci:

$("button.shownextrow").click(function() { 
    $(this).closest("tr").next().show(); 
}); 

Cela va de la touche ($(this)) jusqu'à la <tr> en utilisant .closest() obtient alors le .next() frères et soeurs <tr>-.show() . Vous pouvez utiliser .toggle() au lieu de .show() mais le reste est le même.

You can give it a try here. Notez que vous avez un <input> directement dans un <tr> dans l'exemple, j'ai enveloppé ceci dans un <td> pour en faire une démo valide.

Answer 2

Nick's approach est très bien, mais je serais probablement utiliser un seul gestionnaire pour la table entière (« délégation d'événement ») via la fonction delegate, plutôt que des gestionnaires individuels sur chaque bouton, comme ceci:

$('#theTable').delegate("button.shownextrow", "click", function() { 
    $(this).closest("tr").next("tr").show(); 
}); 

Entre autres choses, cela vous permet d'ajouter plus de paires de lignes à la table (et d'enlever des paires de lignes) sans vous soucier de brancher/déverrouiller les gestionnaires d'événements pour eux. L'esprit, il ne nécessite que rien directement dans la hiérarchie entre l'élément button et l'élément table clics ... Mange

---

Voici mon exemple plus qui n'a pas utilisé delegate, juste à des fins historiques   — wow ne delegate simplifier le code:

$('#theTable').click(function(event) { 
    var button = $(event.target).closest("button.shownextrow"); 
    if (button.length > 0) { 
     button.closest("tr").next("tr").show(); 
    } 
}); 

Live example

Answer 3

Vous pouvez simplement appeler le parent tr montrer la prochaine tr:

$('button.shownextrow').click(function() { 
    $(this).parents('tr').next('tr').show(); 
}); 

Je l'ai utilisé et cela a fonctionné très bien.