2

行にクラスがあるテーブルがあります。

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

2 つのボタンを作成する必要があります。

  • [レベル 1 と 2 を非表示] - クリックすると、レベル 2 のすべての行が非表示または表示されます。
  • [レベル 2 を非表示] - クリックすると、レベル 1 とレベル 2 の行が非表示または表示されます。

jQueryでこれを実装する方法を教えてもらえますか?

4

5 に答える 5

5

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-21T09:55:03.577 に答える
0

これをチェック

<!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-21T10:27:41.550 に答える
0

クリックとnext()関数を使用します。

http://jsfiddle.net/Ah7Dm/

$('.level-1').click(function(){
  $(this).next('.level-2').toggle();
});
于 2012-07-21T09:57:15.003 に答える
0

次のレベルが前の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
        });

私はこれがあなたの問題を解決できることを願っていますが、私はすべて動的に生成しました。レベル 1 をクリックすると、レベル 4 の後であっても、レベル 2 のすべての要素の切り替えが解除されます。しかし、レベル 4 はまだ非表示になり、ループのようになります。

于 2014-07-07T21:08:30.537 に答える
0 
$(function(){
    $('#button1').click(function(){
        $('#level0').hide('slow');  
        $('#level0').hide('slow');  
        ...
    });

    $('#button2').click(function(){
        $('#level0').show('slow');  
        $('#level0').show('slow');  
        ...
    });         
});
于 2012-07-21T10:01:45.940 に答える