Показать / скрыть таблицы с помощью jQuery

Question

У меня есть ряд таблиц, похожих на следующий HTML-код:

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

Я хочу, чтобы таблицы расширялись индивидуально при нажатии на соответствующую головку (<th>). Причем таблицы должны начинаться нерасширенными. Я использую следующий скрипт jQuery:

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

Однако, когда я выполняю только верхнюю таблицу, она может показать / скрыть не вторую. Кто-нибудь может увидеть, где я иду не так?

Answer 1

Вы используете один и тот же идентификатор для нескольких элементов. При поиске по идентификатору jQuery вернет только один элемент (первый с этим идентификатором) Таким образом, ваш код действует только на первую таблицу. Используйте класс в таблицах вместо идентификатора.

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

Answer 2

Гораздо более простой способ сделать это - использовать класс вместо идентификатора для значений table. Таким образом, их легче отнести к группе

<table class="film"> ... 

После чего следующий jquery должен дать вам поведение, которое вы ищете

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

Скрипка: http://jsfiddle.net/WZUAZ/1/

Answer 3

Вот рабочая версия: http://jsfiddle.net/6Ccj7/

Ваш html не работает.Измените это:

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

На это:

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

Кроме того, вы использовали идентификатор для film, когда на самом деле у вас есть 2 экземпляра.Вы вместо этого класс:

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

Вот обновленный 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;}
       });
}); 

Answer 4

показать / скрыть таблицу с jquery

Код здесь! я использую slideToggle + data attr

Answer 5

Две проблемы:Во-первых, ваш HTML не работаетИзмените

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

на

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

Во-вторых, идентификаторы HTML должны быть уникальными, поэтому я предлагаю вместо этого использовать классы.

Вот рабочий пример: http://jsfiddle.net/jkohnen/tBkh4/

Я использовал .toggle (), чтобы немного упростить jQuery

Надеюсь, что это помогает, и Счастливое кодирование.

Answer 6

Используя этот jQuery, вы можете показывать и скрывать

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

HTML

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