使用jQuery显示/隐藏表格

Show/hide tables with jQuery

本文关键字：隐藏 表格 显示 jQuery 使用      更新时间：2023-09-26

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

然而，当我执行时，只有顶级表能够显示/隐藏而不是第二个表。有人知道我哪里出错了吗?

在多个元素上使用相同的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)"
});

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

<table class="film"> ...

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

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

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

工作版本:http://jsfiddle.net/6Ccj7/

你的html坏了。改变这个:

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

: 

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

另外，当您实际上有2个实例时，您使用了film的id。class:

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

两个问题:
首先，你的HTML被破坏了
把

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


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

第二，HTML的id应该是唯一的，所以我建议使用类代替。

下面是一个工作示例:http://jsfiddle.net/jkohnen/tBkh4/

我使用。toggle()来简化一下jQuery

希望有帮助，快乐编码。

使用jquery显示/隐藏表格

代码在这里!我使用slideToggle + data attr

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

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

<button id="hide">Hide</button>
<button id="show">Show</button>
相关文章：