Show hide table column using checkbox in jquery

This article talks about a common requirement in enterprise dashboards where you have a bunch of columns in a table and you want to show hide columns, depending on the checkbox you selected.

The approach is to create a bunch of checkboxes that match the number of columns in the table, as well as assign the same class as that of the checkboxes to the header as well as cells of each column in the table.

If you observe, the first cell of each column has a class ‘empid’ which matches the class of checkbox ‘EmployeeID’. To show/hide the column when a corresponding checkbox is clicked, use this code:

$(function() {

var$chk = $("#grpChkBox input:checkbox"); // cache the selector

var$tbl = $("#someTable");

$chk.prop('checked', true); // check all checkboxes when page loads

$chk.click(function() {

varcolToHide = $tbl.find("."+ $(this).attr("name"));

$(colToHide).toggle();

});

});

Start by caching the selector that selects all checkboxes inside the div grpChkBox. Similarly you can even cache $(“#someTable”) for a tiny performance benefit.

Then check all checkboxes at page load. Since it’s a bunch of checkboxes that you have to mark as checked together, use prop() that can set one or more properties (in our case checked) for every matched elements.

From jQuery 1.6 onwards, you should use prop() and not attr()

In the click event of any of the checkboxes, use $(this).attr(“name”) to determine the class name of the checkbox that was clicked. Then construct a selector of all cells matching this class using $tbl.find() to find all cells with the class name. This will give you some performance improvement especially if you are using the code on a page that has a couple of tables. This line prevents the code to search through every DOM element to find the table and class names; rather it only looks for children rows under the table someTable.

In the beginning, I told you that we are assigning the same class to the cells of each column as that of the checkboxes. Now all we need to do is show/hide it using toggle().

This is done using this simple line of code which toggles the visibility of the columns:

Show and Hide Columns in a Table using CheckBoxes Based on Header Index

So far, we looked at an ideal scenario where the cells and header of the table were marked with the same class name corresponding to the checkboxes. But what if there are no classes marked on the individual cells and basically you are feeling lazy to go ahead and add classes on all the rows. In this case, just mark the header row with classes corresponding to the ones on the checkboxes and use the solution demonstrated in this recipe.

In order to show/hide columns when the checkbox is clicked, use this code:

$(function() {

var$chk = $("#grpChkBox input:checkbox");

var$tbl = $("#someTable");

var$tblhead = $("#someTable th");

$chk.prop('checked', true);

$chk.click(function() {

varcolToHide = $tblhead.filter("."+ $(this).attr("name"));

varindex = $(colToHide).index();

$tbl.find('tr :nth-child('+ (index + 1) + ')').toggle();

});

});

As you can observe, we have changed a couple of things as compared to our previous example. The first change is I have cached two selectors, the first that references the table and the other that references only the header of the table.

var$tbl = $("#someTable");

var$tblhead = $("#someTable th");

Next observe the code inside the checkbox click event.

varcolToHide = $tblhead.filter("."+ $(this).attr("name"));

varindex = $(colToHide).index();

$tbl.find('tr :nth-child('+ (index + 1) + ')').toggle();

Since $tblhead contains only the header’s (th) of the table, instead of looking for children using find(), this time we use filter() to match the header with the corresponding checkbox class.

Once we have the table header we need, we retrieve the index of the column header. For this we use index(). As the jQuery documentation states “If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements“. In our case, index function returns index based on the filter we provide, starting with 0 for first table header, 1 for second table header and so on.

The nth-child selector is fantastic. All you need to give it, is an integer like nth-child(1) and it will select all rows index.

:nth-child() is the only jQuery selector that is one-based. The jQuery documentation says “jQuery’s implementation of :nth- selectors is strictly derived from the CSS specification, the value of n is “1-indexed”, meaning that the counting starts at 1“. Since the index() method in the previous line starts with zero, hence we are saying (index + 1) to reference the first column in the table.

Twitter Feed

Facebook Like

About Us

We are the creative team of designers. Our target is to provide templates, themes and plugin easily to developers and end users who can customize all the data and design from back-end and manage his/her site by themselves and also provide themes to you below the market rate. And we also provide customized templates to users on your order, you can place your order on request a quote page.