Question

我正在寻找一种方法来一次扩展/折叠所有表行。以下代码对我有用，但一次只能为一行。

<!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。

任何帮助都会非常感激。

Answer 1

添加按钮：

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

Answer 2

您是否尝试$(this).parent().children("tr").show();这会切换实际表格中的所有tr。

Answer 3

感谢Thomas Clayson所有人都工作得非常漂亮。

以下是有人感兴趣的完整代码。

所有行只需点击一下即可展开/折叠，单行也可以展开单个行的图像更改以及展开所有行时的行。

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

一次单击展开/折叠所有表行

3 个答案: