如何使用jQuery隱藏和顯示錶格中的行？

我有一個表，我行具有類：如何使用jQuery隱藏和顯示錶格中的行？

<table id="abc"> 
<tr class="level-0"> 
<tr class="level-1"> 
<tr class="level-2"> 
</table>

我需要創建兩個按鈕。

[隱藏級別1和2] - 點擊時隱藏或顯示所有級別2行。
[隱藏級別2] - 點擊時隱藏或顯示級別1和級別2行。

有人能告訴我如何用jQuery實現這個嗎？

來源

2012-07-21 Alan2

http://api.jquery.com/toggle/ – 2012-07-21 09:55:20

使用click事件處理程序和toggle功能（說明檢查jquery API）：

$('#button1').click(function() { 
    // all trs with level-1 class inside abc table 
    $('#abc tr.level-1').toggle(); 
}); 

$('#button1and2').click(function() { 
    // all trs with level-1 or level-2 class inside abc table 
    $('#abc tr.level-1, #abc tr.level-2').toggle(); 
});

http://jsfiddle.net/73JAV/

來源

2012-07-21 09:55:03 Zbigniew

爲什麼我被低估了？ – Zbigniew 2012-07-21 09:57:47

這種方式無法奏效 - 請小提琴演示;你也要重新查詢這兩個點擊處理程序的內部，這是不必要的開銷。 – philwinkle 2012-07-21 09:57:55

嗯，我已經添加了小提琴和它的工作原理，雖然OP沒有完全指定它應該如何表現：「隱藏或顯示」，所以它聽起來像是「切換」給我。 – Zbigniew 2012-07-21 10:02:30

使用點擊和next()功能：

http://jsfiddle.net/Ah7Dm/

$('.level-1').click(function(){ 
    $(this).next('.level-2').toggle(); 
});

來源

2012-07-21 09:57:15 philwinkle

$(function(){ 
    $('#button1').click(function(){ 
     $('#level0').hide('slow'); 
     $('#level0').hide('slow'); 
     ... 
    }); 

    $('#button2').click(function(){ 
     $('#level0').show('slow'); 
     $('#level0').show('slow'); 
     ... 
    });   
});

來源

2012-07-21 10:01:45 jainvikram444

檢查這一項

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" > 
    </script> 
    <script type="text/javascript"> 
     $(function(){ 
      $('#level_1_2').click(function(){ 
       $('.level-2').toggle(); 
      }); 
      $('#level_2').click(function(){ 
       if(jQuery('.level-1').is(':visible')){ 
        $('.level-2').show(); 
       }else{ 
        $('.level-2').hide(); 
       } 
       $('.level-2 , .level-1').toggle(); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <input type="button" id="level_1_2" value="Hide level 1 and 2"> 
    <input type="button" id="level_2" value="Hide level 2"> 
    <table id="abc"> 
    <tr class="level-0"><td>0</td></tr> 
    <tr class="level-1"><td>1</td></tr> 
    <tr class="level-2"><td>2</td></tr> 
    </table> 
</body> 
</html>

來源

2012-07-21 10:27:41

我有同樣的問題，即一個新的水平是之前的TR的孩子。

`<table> 
<tbody> 
<tr class="level-1"></tr> 
<tr class="level-2"></tr> 
<tr class="level-3"></tr> 
<tr class="level-4"></tr> 
<tr class="level-4"></tr> 
<tr class="level-2"></tr> 
<tr class="level-2"></tr> 
</tbody> 
</table>

到目前爲止，我已經

$('table tbody .level-1').click(function(event) { 
     event.preventDefault(); 

     var current_tr_class = $(this).parent().attr('class'); 
     next_tr_class = parseInt(current_tr_class.replace (/[^\d.]/g, ''))+1; // get last increase by 1 it is 1 make it 2 

     $('tr.level-'+next_tr_class).toggle({ opacity: "toggle" }); // Open toggle2 
     });

我希望這可以解決你的問題，但不是我的我都動態生成。並且如果你點擊level-1，即使它在level-4之後，它也不會使用level-2解除所有元素。但4級將仍然隱藏，它會像循環。

來源

2014-07-07 21:08:30 Harry

我有相同的要求，你做的每一個奇數行都是細節，我想在點擊上面的行時展開。我發現這個漂亮的小jQuery插件。非常簡單的代碼：http://www.jankoatwarpspeed.com/expand-table-rows-with-jquery-jexpand-plugin/ – 2015-04-19 18:39:49

如何使用jQuery隱藏和顯示錶格中的行？

回答

相關問題