Cacher une ligne dans une table et l'afficher à nouveau?

Question

J'utilise une boucle foreach dans la page ASP.NET MVC View. Pour chaque élément de la collection sur lequel opère foreach, je crée deux lignes - une pour l'affichage, une pour l'édition. Je veux masquer la ligne d'édition et ne l'affiche plus tard qu'en fonction de l'action de l'utilisateur.

Si je masque les lignes d'édition avec display: none, alors la méthode show() de jQuery ne peut pas l'afficher à nouveau - cela ne fonctionne pas. Si je me cache comme ça

// I put this inside the foreach loop 
<script type="text/javascript"> 
$("#edititem_" + <%: item.Id %>).hide(); 
</script> 

fonction jQuery de show() peut afficher plus tard, mais la page ne valide pas parce que c'est à l'intérieur <tbody> étiquette (c'est là que j'énumère ma collection et créer <tr> « s)

Je veux être en mesure d'afficher/masquer les lignes d'édition à la demande et avoir toujours une page valide XHTML.

Comment puis-je y parvenir?

Answer 1

utiliser un fichier CSS et ajouter un Class à la ligne d'édition et une autre classe à la ligne d'affichage.

si vous écrivez

.editRows { 
    display:none; 
} 

dans le fichier CSS, le .show() des œuvres jquery.

ou vous pouvez faire

$(".editRows").hide(); 

Answer 2

Avoir degredation gracieux aussi bien, vous pouvez coller avec la cachette fait via jQuery, juste donner le modifier <tr> les lignes d'une classe, par exemple <tr class="edit"> puis cacher tous ceux à la fois avec jQuery en dehors de la table, comme ceci:

<script type="text/javascript"> 
    $(function() { 
    $("tr.edit").hide(); 
    }); 
</script> 

Cette approche, au lieu de les cacher au large de la chauve-souris avec CSS est plus facile à ceux qui ont JS désactivé, si vous pourriez avoir un public d'utilisateurs comme ça, aller avec cette approche .hide().