展開/摺疊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上的所有表格行點擊

回答

相關問題