


Var $chk = $("#grpChkBox input:checkbox") // cache the selector To show/hide the column when a corresponding checkbox is clicked, use this code: If you observe, the first cell of each column has a class ‘empid’ which matches the class of checkbox ‘EmployeeID’. The complete markup can be viewed in the source code accompanying this article: Here’s a subset of the markup we are using. 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.Ĭreate a new file called ‘HideShowColumns.html’. 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.
