CODEWITHSUNDEEP
jqueryhtml
user3627305
user3627305

Reputation: 11

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

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

Upvotes: 1

Views: 4501

Answers (6)

flowstoneknight
flowstoneknight

Reputation: 1236

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.

Upvotes: 0

Swapnil
Swapnil

Reputation: 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/

Upvotes: 0

Amit Kumar
Amit Kumar

Reputation: 5962

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

Upvotes: 0

Shirin Abdolahi
Shirin Abdolahi

Reputation: 1067

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.

Upvotes: 3

Khaleel
Khaleel

Reputation: 1371

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

Upvotes: 0

Benjamin
Benjamin

Reputation: 357

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! :)

Upvotes: 0

Related Questions