使用jQuery显示/隐藏表

我有一系列类似于以下html代码的表：

 
//HEAD CONTENT 1//
 
 
 
//BODY CONTENT 1//
 
 
 
//HEAD CONTENT 2//
 
 
 
//BODY CONTENT 2//
  

我希望在单击相应的头（

）时单独扩展表。 表格应该开始未展开。 我使用以下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

您在多个元素上使用相同的ID。 当你按id搜索时，jQuery将只返回一个项目（第一个带有该id）。 所以你的代码只在第一个表上运行。 在表上使用类而不是id。

 ...... $('.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值的id。 这样他们就可以更容易地被称为一个群体

  ... 

之后，以下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坏了。 改变这个：

 //BODY CONTENT 2// 

对此：

 //BODY CONTENT 2// 

此外，你实际上有2个实例，你使用id作为film 。 你改为上课：

 
 
//HEAD CONTENT 1//
 
 
 
//BODY CONTENT 1//
 
 
 
//HEAD CONTENT 2//
 
 
 
//BODY CONTENT 2//
  

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

两个问题：
首先，您的HTML已损坏
更改

  //BODY CONTENT 2// 

至

  //BODY CONTENT 2// 

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

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

我用.toggle（）来简化jQuery

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

Answer 5

用jquery显示/隐藏表

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

Answer 6

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

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

HTML

 Hide Show