How to show hidden table rows using javascript?

Question

I have a simple table with 5 rows. 1st row is only visible and last 4row are hidden.

<table> 
  <tr> 
   <th>sr</th> 
   <th>Head</th>
  </tr> 
 <tr style="display:block;"> 
   <td>1</td> 
   <td>row 1</td> 
 </tr > 
<tr style="display:none;"> 
   <td>2</td> 
  <td>row 2</td> 
 </tr> 
<tr style="display:none;"> 
   <td>3</td> 
  <td>row 3</td> 
 </tr> 
 <tr style="display:none;"> 
   <td>4</td> 
  <td>row 4</td> 
 </tr> 
 <tr style="display:none;"> 
   <td>5</td> 
  <td>row 5</td> 
 </tr> 
 </table>
 <button id="add">Add row</button>
 <button>Remove row</button>

javascript what i have try

$('#add').click(function() {
rows.show();
});

When click on add row the 2nd row should show and so no and when click on remove row it should hide the latest row and so on

try to solve it first then come back if you stuck in something. SO is not a code me project mate sorry — guradio
– guradio, Commented Jun 2, 2017 at 6:04
i have tired the bootstrap toggle for hide show but only 2nd row gets toggled — rahul.m
– rahul.m, Commented Jun 2, 2017 at 6:05

JYoThI · Accepted Answer · 2017-06-02 06:35:53Z

1

Just find the first hidden tr using and last visible tr like this

$(document).on('click','#add',function(){

  $('table tbody').find('tr:hidden:first').show();

});
$(document).on('click','#remove',function(){

  $('table tbody').find('tr:visible:last:not(:first-child)').hide();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table> 
  <tr> 
   <th>sr</th> 
   <th>Head</th>
  </tr> 
  <tbody>
 <tr style="display:block;"> 
   <td>1</td> 
   <td>row 1</td> 
 </tr > 
<tr style="display:none;"> 
   <td>2</td> 
  <td>row 2</td> 
 </tr> 
<tr style="display:none;"> 
   <td>3</td> 
  <td>row 3</td> 
 </tr> 
 <tr style="display:none;"> 
   <td>4</td> 
  <td>row 4</td> 
 </tr> 
 <tr style="display:none;"> 
   <td>5</td> 
  <td>row 5</td> 
 </tr> 
 </tbody>
 </table>
 <button id="add">Add row</button>
 <button id="remove">Remove row</button>

edited Jun 2, 2017 at 6:35

answered Jun 2, 2017 at 6:12

JYoThI

12.1k1 gold badge13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

JYoThI Over a year ago

if my answer is useful mark it with green tick it's useful for future user reference @RahulMohite

rahul.m Over a year ago

how can it prevent 1st row to remove from table

rahul.m Over a year ago

is it possible to prevent 1st row from getting removing

JYoThI Over a year ago

yeah possible just wait a minute @RahulMohite

rahul.m Over a year ago

hey @JYoThI what happend?

|

Prashant Shirke · Accepted Answer · 2017-06-02 06:30:54Z

1

Check if below code works!

I have added id to add and remove buttons.

$('#btnAdd').click(function () { 
  $("table tr:hidden:first").show();
});

$('#btnRemove').click(function () {
   if($("table tr:visible").length !== 2) {
     $("table tr:visible:last").hide();
   }
});

edited Jun 2, 2017 at 6:30

answered Jun 2, 2017 at 6:08

Prashant Shirke

1,4231 gold badge8 silver badges10 bronze badges

3 Comments

rahul.m Over a year ago

its works but how to prevent 1st row to get removing

Prashant Shirke Over a year ago

Try putting your required use cases in question. Thanks!

rahul.m Over a year ago

oh sure from next time

Majid Parvin · Accepted Answer · 2017-06-02 06:07:50Z

0

You can use this jQuery function to find hidden tr:

var hiddenTRs = $("tr:hidden");

then you can show of of them with:

hiddenTRs.first().show();

answered Jun 2, 2017 at 6:07

Majid Parvin

5,1706 gold badges33 silver badges52 bronze badges

Comments

UfguFugullu · Accepted Answer · 2017-06-02 06:17:12Z

Pure jQuery solution

You could change your buttons

<button data-action="add">Add row</button>
<button data-action="remove">Remove row</button>

and now you can use this script

$(document).ready(function() { 
  $('button[data-action]').on('click', function() {

    // which button is pressed?
    if ($(this).data('action') == 'add') {

      // show 'tr' of all 'td'
      $('table td').parent().css('display', 'block');
    } else {

      // hide'tr' of all 'td'
      $('table td').parent().css('display', 'none');
    }
  });
});

Bootstrap solution

Change your table rows

<tr style="height: 0px;"> 
  <td>5</td> 
  <td>row 5</td>
</tr>

Now you can use this

$(document).ready(function() { 
  $('button[data-action]').on('click', function() {

    // which button is pressed?
    if ($(this).data('action') == 'add') {

      // show 'tr' of all 'td'
      $('table td').parent().collapse('show');
    } else {

      // hide'tr' of all 'td'
      $('table td').parent().collapse('hide');
    }
  });
});

Collectives™ on Stack Overflow

How to show hidden table rows using javascript?

4 Answers 4

7 Comments

3 Comments

Comments

Pure jQuery solution

Bootstrap solution

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

3 Comments

Comments

Pure jQuery solution

Bootstrap solution

Comments

Your Answer

Sign up or log in

Post as a guest

Related