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

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -