テーブル行でダブルクリックすると1行以外のすべての行が非表示になる

Question

htmlテーブル行に表示/非表示の整備を使用しようとしています。テーブル行をダブルクリックすると、detailクラスが追加され、残りのテーブル行が非表示になります。

は、ここでは、コードです：

<table class='container'> 
    <tr> 
     <th>ID</th> 
     <th>ID1</th> 
     <th>Title</th> 
    </tr> 
    <tr id='7305' class='testtr'> 
     <td>7305</td> 
     <td>7305</td> 
     <td>Title1</td> 
    </tr> 
    <tr id='7381' class='testtr'> 
     <td>7381</td> 
     <td>7381</td> 
     <td>Title2</td> 
    </tr> 
    <tr id='8573' class='testtr'> 
     <td>8573</td> 
     <td>8573</td> 
     <td>Title3</td> 
    </tr> 
</table> 

最初のステップは動作しますが、私は自分で第2工程を修正することはできません。

<script> 
    $(function() { 
     $("table").colResizable({ liveDrag: true }); 
    }); 

    $('.testtr').dblclick(function() { 
     $('.testtr').hide(); 
     $('.testtr').not(this).addClass('hidden'); 
     $(this).show(); 
    }); 
    $('.testr.detail').dblclick(function() { 
     $('hidden').toggle(); 
     $(this).removeClass('detail'); 
    }); 
</script> 

私は、私はすべての行が、1つを非表示にすることができます...しかし、私は非表示の行を再表示することはできません言ったように：これをしませんでした。手伝ってくれますか ？

Answer 1

使用toggleClass .Checkこのサンプル

$(function() { 
 
     // $("table").colResizable({ liveDrag: true }); 
 
    }); 
 

 
    $('.testtr').dblclick(function() { 
 
     // $('.testtr').hide(); 
 
     $('.testtr').not(this).toggleClass('hidden'); 
 
     $(this).toggleClass('detail'); 
 
     //$(this).show(); 
 
    }); 
 
    /* $('.testr.detail').dblclick(function() { 
 
     $('hidden').toggle(); 
 
     $(this).removeClass('detail'); 
 
    });*/

.hidden{ 
 
display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class='container'> 
 
    <tr> 
 
     <th>ID</th> 
 
     <th>ID1</th> 
 
     <th>Title</th> 
 
    </tr> 
 
    <tr id='7305' class='testtr'> 
 
     <td>7305</td> 
 
     <td>7305</td> 
 
     <td>Title1</td> 
 
    </tr> 
 
    <tr id='7381' class='testtr'> 
 
     <td>7381</td> 
 
     <td>7381</td> 
 
     <td>Title2</td> 
 
    </tr> 
 
    <tr id='8573' class='testtr'> 
 
     <td>8573</td> 
 
     <td>8573</td> 
 
     <td>Title3</td> 
 
    </tr> 
 
</table>

Answer 2

最後の関数で非表示にするセレクタは、代わりに ".hidden"にする必要がありますか？

あなたはドットを忘れてしまったようです。また、あなたが追加したクラスは、あなたが言及したように詳細の代わりに隠されています。多分それも問題です。