Years ago I wrote a post called Hide Table Columns with JavaScript and I have wanted to write an updated version ever since. The original solution is rather naive and since then I’ve become a better developer, especially with JavaScript and jQuery. So for those of you who need this kind of functionality, here is my new version of hiding table columns using jQuery.

This technique does require jQuery so you’ll either need to grab a copy and host it yourself, or link to the versions that Google provides. I’m a fan of the Google-hosted version because it may already be cached from other sites using it and even if not it will likely be served faster from Google’s servers than your own.

The table setup is fairly simple if you are producing it dynamically with PHP, ASP, etc. As you iterate over each row give each column a CSS label. So your first row might be table headings, and you could give them classes of ‘col1′; ‘col2′; ‘col3′; and so on. Do the same for every table row. If you do not want to allow hiding of a certain column, you don’t need to give those items a class.

Now we need to add a way to actually trigger the removal of a column. In my example I do this with a simple anchor in the heading of each column. Clicking on the ‘x’ will hide the column and add a link to ‘show’ that column to the list below the table. To show a hidden column, just click the corresponding link. I chose to keep the example simple and use the class name in the link, but it could be easily enhanced to display a more user-friendly name for the column. The location of the ‘show’ links could also be changed, perhaps to a table sidebar or as part of the table footer.

The JavaScript that handles the hide and show functionality is fairly simple thanks to jQuery. When you click on the ‘x’ to hide a column, jQuery finds each item in the table with the specified class and hides it. When you show a hidden column, the same items are found and unhidden. If you want a nicer looking effect when hiding or showing a column you can experiment with the jQuery animation effects.

Check out the full hide columns demo.

HTML snippet:

<table>
<thead>
<tr>
<th class="col1">col1 <a class="hide"
href="javascript:;" onclick="hideCol('col1');">x</a></th>
<th class="col2">col2 <a class="hide"
href="javascript:;" onclick="hideCol('col2');">x</a></th>
<th class="col3">col3 <a class="hide"
href="javascript:;" onclick="hideCol('col3');">x</a></th>
<th class="col4">col4 <a class="hide"
href="javascript:;" onclick="hideCol('col4');">x</a></th>
</tr>
</thead>
<tbody>
<tr>
<td class="col1">data1</td>
<td class="col2">data2</td>
<td class="col3">data3</td>
<td class="col4">data4</td>
</tr>
<tr>
<td class="col1">data1</td>
<td class="col2">data2</td>
<td class="col3">data3</td>
<td class="col4">data4</td>
</tr>
<tr>
<td class="col1">data1</td>
<td class="col2">data2</td>
<td class="col3">data3</td>
<td class="col4">data4</td>
</tr>
</tbody>
</table>
<ul id="hiddenCols"></ul>


JavaScript:

function hideCol(columnClass){
$('table .'+columnClass).each(function(index) {
$(this).hide();
});

$('ul#hiddenCols').append('<li id="'+columnClass
+'"><a href="javascript:;" onclick="showCol(\''
+columnClass+'\');">Show '+columnClass+'</a></li>');
}

function showCol(columnClass){
$('table .'+columnClass).each(function(index) {
$(this).show();
});

$('li#'+columnClass).remove();
}


Individual resource files (right-click and save):
HTML
JavaScript
CSS (not required)