CODEWITHSUNDEEP
javascriptjquerycss
Sujit Jadhav
Sujit Jadhav

Reputation: 115

Hide/Show rows of table using jQuery

I have a table with many rows, ideally i would want to show row (tr) with a specific class and hide all other tr. All the tr have unique class assigned.

I have tried it using the below in CSS

.displayNone{
    display:none;
}

.displayBlock{
    display:block;
}

And then from js adding and removing class but does not work.

Js Fiddle: https://jsfiddle.net/SujitJ/wz82w4m3/1/

Also it should be a smooth transition. Please help!

Upvotes: 0

Views: 160

Answers (5)

Aymen
Aymen

Reputation: 1496

use .hide(), .show() for info:w3schools

$('#1').click(function() {
  $('.111A').hide();
}); 

$('#2').click(function() {
  $('.111A').show();
});

Upvotes: 0

japu soft dev
japu soft dev

Reputation: 80

Your code is right and will work only if you use the "jquery.min.js" file which handles the 'click' event.

Upvotes: 0

pablopunk
pablopunk

Reputation: 371

That fiddle is working, but you need to add jQuery library to the javascript config. Also you could simple use jQuery methods like $('.11A').fadeIn() and $('.11A').fadeOut() for smooth fades.

Upvotes: 0

Enrico Agrusti
Enrico Agrusti

Reputation: 514

There a few things to say here:

In your JSFiddle you haven't included the link to jQuery, so it doesn't recognize the dollar symbol (as it isn't part of native javascript). If you do include it, it hides correctly the first row, but if you try to show it, it doesn't work so well. This happens because you try to give a display: block; to a <tr> element, making it behave NOT like a table row.

The solution to this is to only use your .displayNone CSS class, as shown here: https://jsfiddle.net/wz82w4m3/3/

EDIT:

To make it "a smooth transition", as you mentioned, you can use the jQuery .hide() and .show() methods, considering that the integer you pass is the number of milliseconds that the animation runs, as shown here: https://jsfiddle.net/wz82w4m3/4/

Upvotes: 0

ankita patel
ankita patel

Reputation: 4251

Please try this.

$('#1').click(function() {
    $('.111A').hide();
}); 

$('#2').click(function() {
    $('.111A').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableContent">
  <thead>
    <tr>
      <th class="col1">RoleName</th>
      <th class="col2">ReadOnly</th>
      <th class="col3">Modify</th>		
      <th class="col4">Approve</th>
    </tr>
  </thead>
  <tbody>	
    <tr class="111A">
      <td>Policy</td>
      <td>true</td>
      <td>false</td>
      <td>false</td>						
    </tr>
    <tr class="222A">
      <td>Policy</td>
      <td>true</td>
      <td>false</td>
      <td>false</td>						
    </tr>	
  </tbody>
</table>

<button id="1">addNone</button>
<button id="2">addBlock</button>

Upvotes: 2

Related Questions