Javascript 使用 jQuery 显示/隐藏表格

Show/hide tables with jQuery

提问by Andreas Jarbol

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

我有一系列类似于以下 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>

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:

我希望在<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;}
       });
});

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?

但是，当我仅执行顶部表时，不能显示/隐藏第二个表。谁能看到我哪里出错了？

回答by yoozer8

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.

您在多个元素上使用相同的 id。当您按 id 搜索时，jQuery 将只返回一个项目（具有该 id 的第一个项目）。所以你的代码只作用于第一个表。在表上使用类而不是 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)"
});

回答by JaredPar

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

一个更简单的方法是对值使用类而不是 id table。这样他们可以更容易地被称为一个组

<table class="film"> ... 

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

之后以下 jquery 应该给你你正在寻找的行为

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

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

小提琴：http: //jsfiddle.net/WZUAZ/1/

回答by Allen Liu

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

这是一个工作版本：http: //jsfiddle.net/6Ccj7/

Your html is broken. Change this:

你的html坏了。改变这个：

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

To this:

对此：

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

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

此外，您film在实际上有 2 个实例时使用了 id 。你上课：

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

这是更新的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;}
       });
}); 

回答by Justin Kohnen

Two problems:
First, Your HTML is broken
Change

有两个问题：
第一，你的HTML被打破
变化

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

其次，HTML id 应该是唯一的，所以我建议改用类。

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

这是一个工作示例：http: //jsfiddle.net/jkohnen/tBkh4/

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

我使用 .toggle() 来简化 jQuery

Hope that helps, and Happy Coding.

希望有所帮助，并快乐编码。

回答by Krucamper

show/hide table with jquery

使用 jquery 显示/隐藏表

Code here !i'm useslideToggle + data attr

代码在这里！我在用slideToggle + data attr

回答by Madhuka Dilhan

Using this jQuery you can show & hide

使用这个 jQuery 你可以显示和隐藏

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

html

html

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