web-dev-qa-db-fra.com

Afficher/masquer les tableaux avec jQuery

J'ai une série de tables similaires au code html suivant:

<table id="film"><tr>
       <th class="1">//HEAD CONTENT 1//</th>
       </tr>
       <tr>
       <td class="1">//BODY CONTENT 1//</td>
       </tr></table>
<table id="film"><tr>
       <th class="2">//HEAD CONTENT 2//</th>
       </tr>
       <tr>
       <td class="2">//BODY CONTENT 2//</td>
       </tr></table>

Je veux que les tables se développent individuellement lorsque l'on clique sur l'en-tête respectif (<th>). De plus, les tables devraient commencer non développées. J'utilise le script jQuery suivant:

$(document).ready(function(){
    $('#film td').hide();
});

$(document).ready(function(){
var n1 = 0;
      $('#film th.1').click(function(){
         if(n1 == 0){
         $('#film td.1').show();
         n1 = 1;
         }else{
        $('#film td.1').hide();
         n1 = 0;}
       });
var n2 = 0;
      $('#film th.2').click(function(){
         if(n2 == 0){
         $('#film td.2').show();
         n2 = 1;
         }else{
        $('#film td.2').hide();
         n2 = 0;}
       });
});

Cependant, lorsque j'exécute, seule la table du haut peut afficher/masquer la seconde. Est-ce que quelqu'un peut voir où je me trompe?

javascriptjqueryanimationhtml-table
9
Andreas Jarbol

Vous utilisez le même identifiant sur plusieurs éléments. Lorsque vous effectuez une recherche par identifiant, jQuery ne renvoie qu'un élément (le premier avec cet identifiant). Votre code n'agit donc que sur la première table. Utilisez une classe sur les tables au lieu d'un identifiant.

<table class="film">......</table>

$('.film').each(function(f) {
    //this function will execute for each element with the class "film"
    //refer to the current element during this function using "$(this)"
});
10
yoozer8

Une méthode beaucoup plus simple consiste à utiliser une classe au lieu d’un identifiant pour les valeurs table. De cette façon, ils peuvent être considérés plus facilement comme un groupe

<table class="film"> ...

Après quoi, l’interrogation suivante devrait vous donner le comportement que vous recherchez.

$(document).ready(function() {
    $('.film td').hide();
    $('th').click(function() {
       $(this).parents('table').find('td').toggle();
    }); 
});

Fiddle: http://jsfiddle.net/WZUAZ/1/

6
JaredPar

Voici une version de travail: http://jsfiddle.net/6Ccj7/

Votre code HTML est cassé. Change ça:

<td class"2">//BODY CONTENT 2//</td>

Pour ça:

<td class="2">//BODY CONTENT 2//</td>

De plus, vous avez utilisé id pour film alors que vous avez 2 instances. Vous classez à la place:

<table class="film"><tr>
       <th class="1">//HEAD CONTENT 1//</th>
       </tr>
       <tr>
       <td class="1">//BODY CONTENT 1//</td>
       </tr></table>
<table class="film"><tr>
       <th class="2">//HEAD CONTENT 2//</th>
       </tr>
       <tr>
       <td class="2">//BODY CONTENT 2//</td>
       </tr></table>

Voici le JS mis à jour:

$(document).ready(function(){
$('.film td').hide();});

$(document).ready(function(){
var n1 = 0;
      $('.film th.1').click(function(){
         if(n1 == 0){
         $('.film td.1').show();
         n1 = 1;
         }else{
        $('.film td.1').hide();
         n1 = 0;}
       });
var n2 = 0;
      $('.film th.2').click(function(){
         if(n2 == 0){
         $('.film td.2').show();
         n2 = 1;
         }else{
        $('.film td.2').hide();
         n2 = 0;}
       });
});
2
Allen Liu

afficher/masquer la table avec jquery

Code ici! Je suis useslideToggle + data attr

1
Krucamper

Deux problèmes: 
D'abord, votre code HTML est cassé 
Changement

 <td class"2">//BODY CONTENT 2//</td>

À

 <td class="2">//BODY CONTENT 2//</td>

Deuxièmement, les identifiants HTML devraient être uniques, donc je suggère d'utiliser plutôt les classes.

Voici un exemple de travail: http://jsfiddle.net/jkohnen/tBkh4/

J'ai utilisé .toggle () pour simplifier un peu jQuery

J'espère que ça aide, et Happy Coding.

1
Justin Kohnen

En utilisant cette jQuery, vous pouvez afficher et masquer 

$("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });

html

<button id="hide">Hide</button>
<button id="show">Show</button>
0
Madhuka Dilhan