使用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;}
       });
});

然而，当我执行时，只有顶部的表格能够显示/隐藏，而第二个表格不能。 有人能看出我错在哪里吗？

- Andreas Jarbol

---

你是否遇到了任何 JavaScript 错误？ - Allen Liu

Answer 1

你在多个元素上使用了相同的id。当你按照id搜索时，jQuery只会返回一个项目(第一个具有该id的元素)。因此，你的代码只作用于第一个表格。应该使用类(class)而不是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)"
});

- yoozer8

Answer 2

使用类（class）而非id来标识表格元素会更加便捷，因为这样可以更方便地将它们作为一组进行处理。

<table class="film"> ... 

接下来的 jQuery 应该可以帮你实现你想要的行为。

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

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

- JaredPar

Answer 3

这里是一个可用版本：http://jsfiddle.net/6Ccj7/

你的HTML代码存在错误。请将以下代码进行修改：

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

转换为：

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

此外，您在实际上有两个实例的情况下，使用了film的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>

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

- Allen Liu

Answer 4

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

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

html

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

- Madhuka Dilhan

Answer 5

两个问题：
首先，你的HTML代码有误
请修改

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

至

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

其次，HTML id 应该是唯一的，因此我建议使用类(class)。

这里有一个可工作的示例：http://jsfiddle.net/jkohnen/tBkh4/

我使用了 .toggle() 来简化 jQuery 代码

希望这能帮到你，祝编码愉快。

- Justin Kohnen

Answer 6

显示/隐藏jQuery表格

代码 在这里！ 使用了slideToggle + data属性

- Krucamper