Show/hide tables with jQuery

问题:

I have a series of tables similar to the following html code:

<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>

I want the tables to expand individually when the respective head (<th>) is clicked. Moreover the tables should start unexpanded. I use the following jQuery script:

$(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;}
       });
});

However when I execute only the top table is able to show/hide not the second one. Can anyone see where I'm going wrong?

回答1:

You are using the same id on multiple elements. When you search by id, jQuery will only return one item (the first with that id). So your code is only acting on the first table. Use a class on the tables instead of an id.

<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)"
});

回答2:

A much easier way to do this is to use a class instead of an id for the table values. This way they can be referred to as a group more easily

<table class="film"> ... 

After which the following jquery should give you the behavior you're looking for

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

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

回答3:

Here is a working version: http://jsfiddle.net/6Ccj7/

Your html is broken. Change this:

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

To this:

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

Also, you used id for film when in fact you have 2 instances. You class instead:

<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>

Here is the updated JS:

$(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;}
       });
}); 

回答4:

Two problems:
First, Your HTML is broken
Change

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

To

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

Second, HTML id's should be unique so I suggest using classes instead.

Here is a working example: http://jsfiddle.net/jkohnen/tBkh4/

I used .toggle() to simplify the jQuery a bit

Hope that helps, and Happy Coding.

回答5:

show/hide table with jquery

Code here ! i'm useslideToggle + data attr

回答6:

Using this jQuery you can show & hide

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

html

<button id="hide">Hide</button>
<button id="show">Show</button>