展开/折叠onc上的所有表格行点击

我正在寻找一种方法来一次点击展开/折叠所有表格行。这里是为我工作的代码，但一次只有一行。展开/折叠onc上的所有表格行点击

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 

    <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
    <link rel="stylesheet" type="text/css" href="main.css" /> 
    <style type="text/css"> 
    .a { 
     border-bottom: 2px solid grey; 
    } 
    </style> 
    <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("#report tr.a").addClass("odd"); 
      $("#report tr.b").hide(); 
      $("#report tr:first-child").show(); 

      $("#report tr.odd").click(function(){ 
       $(this).next("tr").toggle(); 
       $(this).find(".arrow").toggleClass("up"); 
      }); 
      //$("#report").jExpand(); 
     }); 
    </script> 
</head> 
<body> 




echo "<table id='report'><caption class='captionpersonal'> All available trainings</caption>"; 
echo "<tr>"; 
echo "<th></th><th>Training</th><th>Level</th></tr>"; 


    echo "</tr><tr class='a'>"; <----------------------------- clicking on row will expand hidden row 
    echo "<td><div class='arrow'></div></td>"; 


    echo "</tr><tr class='b'>"; <-------------------------- row that is hidden 


?> 
</body> 
</html>

我删除了一些代码，因此它更具可读性。

所以我想实现的是在TableHead上添加一个按钮，然后单击它将展开/折叠所有表格行 - 那些class = b的行。

任何帮助将不胜感激。

来源

2012-02-09 user1100099

添加一个按钮：

<button id="click_for_show_all">Show/Hide all</button>

然后代码显示：

$('#click_for_show_all').click(function(){ 
    // see if they are all shown 
    var children = $('#report tr.b').length; 
    var visibleChildren = $('#report tr.b:visible').length; 
    if(children == visibleChildren) { // all the trs are shown 
    $('#report tr.b').hide(); // hide all b rows 
    } 
    else { 
    $('#report tr.b').show(); // shows all 
    } 
});

来源

2012-02-09 10:52:26

我刚刚尝试过这一个，但无法让它正常工作，它的所有行都展开了，但没有任何交互。不管怎样，谢谢你。我会继续尝试。 – user1100099 2012-02-09 12:07:04

没有互动？你什么意思？你能链接一个真人版让我看看吗？ – 2012-02-09 13:57:27

没有互动 - 我的意思是行不会在点击时展开/折叠。 – user1100099 2012-02-09 14:29:40

你试过$(this).parent().children("tr").show();这会触发实际表中所有的TR。

来源

2012-02-09 10:52:53

但是如果显示了一些并且隐藏了一些，那么它只会切换它们，而不是像OP想要的那样“全部显示”和“隐藏全部”。 – 2012-02-09 10:54:17

你是对的！我会将其更正为.show（） – 2012-02-09 10:56:11

感谢托马斯克莱森所有的工作都很好。

这是完整的代码，以防万一有人感兴趣。

所有行在一次单击时展开/折叠，单行以及单行和全部展开时的图像更改。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 

    <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
    <link rel="stylesheet" type="text/css" href="main.css" /> 
    <style type="text/css"> 
      #report { border-collapse:collapse; width: 100%; height: 100%; border-top:thick double #DCDCDC;} 
     #report th { background: #d1cfd0; padding: 3px 10px; border-bottom: 2px solid #DCDCDC;} 
     #report td { text-align: center; padding: 3px 10px; background: #E2E4FF;} 
     #report tr.odd td { background: white; cursor:pointer;} 
     #report div.arrow { background:transparent url(images/details_open.png) no-repeat; width:20px; height:20px; display:block;} 
     #report div.up { background:transparent url(images/details_close.png) no-repeat;} 
    .a { 
     border-bottom: 2px solid grey; 
    } 
    </style> 

    <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("#report tr.a").addClass("odd"); 
      $("#report tr.b").hide(); 
      $("#report tr:first-child").show(); 

      $("#report tr.odd").click(function(){ 
       $(this).next("tr").toggle(); 
       $(this).find(".arrow").toggleClass("up"); 

      }); 

      $('#click_for_show_all').click(function(){ 
    // see if they are all shown 
    var children = $('#report tr.b').length; 
    var visibleChildren = $('#report tr.b:visible').length; 
    if(children == visibleChildren) { // all the trs are shown 
    $('#report tr.b').hide(); 
    $(this).find(".arrow").toggleClass("up"); 
    $("#report tr.odd").find(".arrow").toggleClass("up"); 
    // hide all b rows 
    } 
    else { 
    $('#report tr.b').show(); 
    $(this).find(".arrow").toggleClass("up"); // shows all 
    $("#report tr.odd").find(".arrow").toggleClass("up"); 
    } 
}); 

     }); 
    </script> 

</head> 
<body> 




echo "<table id='report'><caption class='captionpersonal'> All available trainings</caption>"; 
echo "<tr>"; 
echo "<th><div id='click_for_show_all'><div class='arrow'></div></div>/th><th>Training</th><th>Level</th></tr>"; 


    echo "</tr><tr class='a'>"; <----------------------------- clicking on row will expand hidden row 
    echo "<td><div class='arrow'></div></td>"; 


    echo "</tr><tr class='b'>"; <-------------------------- row that is hidden 


?> 
</body> 
</html>

来源

2012-02-10 10:23:16 user1100099

展开/折叠onc上的所有表格行点击

回答

相关问题