In an HTML table, you can hide or show columns.

Problem

I have an HTML table with numerous columns, and I need to use jquery to create a column chooser. I want to hide/show the corresponding column in the table when a user clicks on a checkbox. I’d like to achieve this without having to add a class to every td in the table; is there a way to use jquery to pick an entire column? An example of HTML is shown below.

<table>
    <thead>
        <tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th></tr>
    </thead>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>

<form>
    <input type="checkbox" name="col1" checked="checked" /> Hide/Show Column 1 <br />
    <input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 <br />
    <input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 <br />
</form>

Asked by Brian Fisher

Solution #1

One line of jQuery code to conceal the second column:

$('td:nth-child(2)').hide();

Use this if your table has a header(th):

$('td:nth-child(2),th:nth-child(2)').hide();

With a single line of jQuery code, you can hide a table column.

To try the code, go to http://jsfiddle.net/mgMem/1/.

Take a look at my blog post for an example of an excellent use case:

Using jQuery, you may hide a table column and colorize rows based on its value.

Answered by Leniel Maccaferri

Solution #2

Personally, I prefer the method of a class on each td/th/col. Then, using a single write to className on the container, you can toggle columns on and off, assuming style rules like:

table.hide1 .col1 { display: none; }
table.hide2 .col2 { display: none; }
...

This will be faster than any JS loop technique, and it will make a considerable difference in responsiveness for particularly long tables.

You might use adjacency selectors to avoid needing to add the class attributes to tds if you can get away with not supporting IE6. Alternatively, if you’re concerned about making the markup cleaner, you might add them automatically in an initialisation stage using JavaScript.

Answered by bobince

Solution #3

Here’s a more advanced answer that allows for user involvement on a column-by-column basis. If this is going to be a dynamic experience, each column should have a clickable toggle that displays the capacity to conceal it, as well as a mechanism to restore previously hidden columns.

In JavaScript, it would look something like this:

$('.hide-column').click(function(e){
  var $btn = $(this);
  var $cell = $btn.closest('th,td')
  var $table = $btn.closest('table')

  // get cell location - https://stackoverflow.com/a/4999018/1366033
  var cellIndex = $cell[0].cellIndex + 1;

  $table.find(".show-column-footer").show()
  $table.find("tbody tr, thead tr")
        .children(":nth-child("+cellIndex+")")
        .hide()
})

$(".show-column-footer").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".show-column-footer").hide()
    $table.find("th, td").show()

})

We’ll add some markup to the table to help with this. We may add something like this to each column header to provide a visual indicator of something clickable.

<button class="pull-right btn btn-default btn-condensed hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>

A link in the table footer will allow the user to restore columns. Toggling it on dynamically in the header may cause it to jostle around the table if it isn’t permanent by default, but you may put it anywhere you want:

<tfoot class="show-column-footer">
   <tr>
    <th colspan="4"><a class="show-column" href="#">Some columns hidden - click to show all</a></th>
  </tr>
</tfoot>

That’s all there is to it in terms of functionality. Here’s a video of a demo with a few additional details added. You can also add a tooltip to the button to better define its purpose, style the button more organically to a table header, and collapse the column width to add some (a bit goofy) css animations to smooth out the transition.

Answered by KyleMit

Solution #4

Colgroups could be used:

<table>
    <colgroup>
       <col class="visible_class"/>
       <col class="visible_class"/>
       <col class="invisible_class"/>  
    </colgroup>
    <thead>
        <tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th></tr>
    </thead>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>

Your script might then modify only the desired col> class.

Answered by Luis Melgratti

Solution #5

It should be as follows:

$("input[type='checkbox']").click(function() {
    var index = $(this).attr('name').substr(2);
    $('table tr').each(function() { 
        $('td:eq(' + index + ')',this).toggle();
    });
});

This code has not been tested, but the idea is that you select the table cell in each row that matches to the index retrieved from the checkbox name. You could, of course, use a class or an ID to limit the selectors.

Answered by Eran Galperin

Post is based on https://stackoverflow.com/questions/455958/hide-show-column-in-an-html-table