jquery - Hide all rows but one/Show rest rows on double click at table row -
i'm trying use show/hide mechanic on html table rows. when doubleclick table row has detail
class added , rest of table rows hidden.
here's code:
<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>
first step works, can't fix second step myself. did this:
<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>
like said, can hide rows one... can't unhide hidden rows. can ?
use toggleclass .check sample
$(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>
Comments
Post a Comment