How Do I Use JQuery To Hide And Show Columns In An HTML Table?

Question

I am trying to use JQuery to hide and show columns on an HTML table by clicking on a button. I can make all of my cells show and hide at once. How do I get just the column whos button I clicked on show and hide?

Here is the HTML I am using for the table:

<table width="500" border="1">
<tbody>
  <tr align="center">
    <td><input type="button" value="Show/Hide" /></td>
    <td><input type="button" value="Show/Hide"/></td>
    <td><input type="button" value="Show/Hide"/></td>
    <td><input type="button" value="Show/Hide"/></td>
    <td><input type="button" value="Show/Hide"/></td>
  </tr>
  <tr>
    <th scope="col">Column 1</th>
    <th scope="col">Column 2</th>
    <th scope="col">Column 3</th>
    <th scope="col">Column 4</th>
    <th scope="col">Column 5</th>
  </tr>
  <tr class="columnMe">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="columnMe">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="columnMe">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="columnMe">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</tbody>

And here is the JQuery I have so far:

$("document").ready(function() {
$( ":button" ).click(function() {
    $('tr.columnMe td').toggle();
});
});

I would like to use THIS (pointing to the button I clicked) so that one function does the job instead of a function for each separate button.

All help appreciated!

Michael

Shirin Abdolahi · Answer 1 · 2014-09-03T09:51:49.000

3

here is a runnign example of what you requested. jsfiddle

I got the number of td in witch the button is clicked,and then hidden all tds of that number in other rows.

$("document").ready(function() {

$( ".button" ).click(function() {
    var t=$(this).parent('td');
    var number= $( "td" ).index( t );
    number=number+1;
    $('tr.columnMe td:nth-child('+number+')').toggle();
});
});

UPDATE:

first I used .toggle() function in jquery.it added css 'display:none'.with 'display' css attribute set to none, columns shifted but with css attr visibility:hidden the place of column stayed in dom and elements are hidden.so I updated my fiddle link above.

edited Sep 03 '14 at 09:51

answered Sep 03 '14 at 09:33

Shirin Abdolahi

1,047
8
18

Even though your answer is much closer to what OP wants than other answers, your fiddle has the same problem that [my fiddle](http://jsfiddle.net/4qmsu0jh/) has: after column hiding, columns that were on right move left... And I have no idea how to fix it. – Regent Sep 03 '14 at 09:38
Well, yes, I again forgot about `visibility`, thanks. You should post the code of updated fiddle for completeness of answer. – Regent Sep 03 '14 at 09:53

score 0 · Answer 2 · edited May 23 '17 at 11:49

This question has already got a similar solution here:

Hide/Show Column in an HTML Table

I think this is what you are looking for.

The problem is you need to add classes to each column so that the button can work out where it is trying to toggle on and off.

You would also need to specify different code for each button to assign it to the different columns.

Let me know if you need any more help! :)

score 0 · Answer 3 · answered Sep 03 '14 at 09:21

since your button also inside the table, you have to bring it out to achieve what you want.. Try this will help you,

HTML:

<table id="tableone" border="1">
    <tr class="del">
        <td>Row 0 Column 0</td>
        <td >Row 0 Column 1</td>
        <td >Row 0 Column 2</td>
    </tr>
    <tr class="del">
        <td>Row 1 Column 0</td>
        <td>Row 1 Column 1</td>
        <td>Row 1 Column 2</td>
    </tr>
    <tr class="del">
        <td>Row 2 Column 0</td>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
    </tr>
    <tr class="del">
        <td>Row 3 Column 0</td>
        <td>Row 3 Column 1</td>
        <td>Row 3 Column 2</td>
    </tr>
     <tr class="del">
        <td>Row 4 Column 0</td>
        <td>Row 4 Column 1</td>
        <td>Row 4 Column 2</td>
    </tr>
     <tr class="del">
        <td>Row 5 Column 0</td>
        <td>Row 5 Column 1</td>
        <td>Row 5 Column 2</td>
    </tr>
</table>
<input id="btnHide" type="button" value="Hide Column 2"/>

script:

 $(document).ready(function() {
            $('#btnHide').click(function() {
                $('td:nth-child(2)').hide();
                // if your table has header(th), use this
                //$('td:nth-child(2),th:nth-child(2)').hide();
            });
        });

Hope it helps

Well... Your fiddle is from [this answer](http://stackoverflow.com/questions/455958/hide-show-column-in-an-html-table#5901376), ok, but why didn't you at least modify it for this question? — Regent, Sep 03 '14 at 09:42
It will be hard to reuse not knowing second essential part: how to determine index of clicked button. Also the problem with shifting columns after hiding persists here. — Regent, Sep 03 '14 at 10:05
yeah agree, I were in same situation few weeks back, I had only the codes copied, If I had the link I would have commented it to the question directly. — Khaleel, Sep 03 '14 at 10:07

Amit Kumar · Answer 4 · 2014-09-03T09:51:59.467

i have added number to your td to see the effect. and added btn class to your button

your jquery

$('.btn').on('click',function(){
    var getColIndex=parseInt($(this).closest('td').index());
    $('table  tr').not('tr:eq(0)').each(function(){
       $(this).find(":nth-child("+(getColIndex+1)+")").toggleClass('hide');
    });
});

css:

   .hide{
    visibility:hidden;
}

here if you will use display:none then it won't preserve space , so I'm using visibility:hidden; to preserve space.

DEMO

score 0 · Answer 5 · answered Sep 03 '14 at 10:21

i have modified your code a little bit

HTML:

 <table><tr align="center">
    <td><input type="button" id="1" value="Column 1" /></td>
    <td><input type="button" id="2" value="Column 2"/></td>
    <td><input type="button" id="3" value="Column 3"/></td>
    <td><input type="button" id="4" value="Column 4"/></td>
    <td><input type="button" id="5" value="Column 5"/></td>
  </tr></table>

<table id="myTable" width="500" border="1">
<tbody>

  <tr>
    <th scope="col">Column 1</th>
    <th scope="col">Column 2</th>
    <th scope="col">Column 3</th>
    <th scope="col">Column 4</th>
    <th scope="col">Column 5</th>
  </tr>
  <tr class="columnMe">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="columnMe">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="columnMe">
    <td>&nbsp;1</td>
    <td>&nbsp;2</td>
    <td>&nbsp;3</td>
    <td>&nbsp;4</td>
    <td>&nbsp;5</td>
  </tr>
  <tr class="columnMe">
    <td>&nbsp;11</td>
    <td>&nbsp;22</td>
    <td>&nbsp;33</td>
    <td>&nbsp;44</td>
    <td>&nbsp;55</td>
  </tr>
</tbody></table>

Script:

     var $colNumber;
$("document").ready(function() {
   $( function() {

        $( ":button" ).click(function() {
         $colNumber=(this.id);

     $('#myTable tr *:nth-child('+$colNumber+')').toggle();

        });

    });  

});

You can check it on http://jsfiddle.net/J24yN/402/

flowstoneknight · Answer 6 · 2014-09-04T00:24:00.967

EDIT 2: Added explanation.

EDIT: Tidied things up a bit.

Try this. I modified your code a bit.

HTML:

<table width="500" border="1">
<tbody>
  <tr align="center">
    <td><input type="button" class="btnShowHide" value="Show/Hide1"/></td>
    <td><input type="button" class="btnShowHide" value="Show/Hide2"/></td>
    <td><input type="button" class="btnShowHide" value="Show/Hide3"/></td>
    <td><input type="button" class="btnShowHide" value="Show/Hide4"/></td>
    <td><input type="button" class="btnShowHide" value="Show/Hide5"/></td>
  </tr>
  <tr>
    <th scope="col">Column 1</th>
    <th scope="col">Column 2</th>
    <th scope="col">Column 3</th>
    <th scope="col">Column 4</th>
    <th scope="col">Column 5</th>
  </tr>
  <tr class="columnMe">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr class="columnMe">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr class="columnMe">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr class="columnMe">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
</tbody>

JS:

$('.btnShowHide').each(function(i) {
    $(this).on('click', function() {
        $('tr:not(:first-child) td:nth-child('+(i+1)+')').toggleClass('hide');
    });
});

Explanation:

tr:not(:first-child) selects all the <tr>s except the first. td:nth-child('+(i+1)+')' selects every i+1-ith <td>, so all the cells in the i+1 column, using the i index from the function set by .each().

Here's a fiddle.

Interesting! Can you elaborate on how the selector works: 'tr:not(:first-child) td:nth-child('+(i+1)+')' ?? What is being selected here? — user3627305, Sep 03 '14 at 18:51
@user3627305 Sure, added explanation to my answer. Let me know if anything's still unclear. — flowstoneknight, Sep 04 '14 at 00:24
I understand tr:not(:first-child) fine. The second set of selectors and the index i are over my head at this point. — user3627305, Sep 04 '14 at 06:34
Question: If I wanted to take my original question and add more questions to it, do I need to create a new post? — user3627305, Sep 04 '14 at 06:35

How Do I Use JQuery To Hide And Show Columns In An HTML Table?

6 Answers6