![]() ![]() In the beginning, I told you that we are assigning the same class to the cells of each column as that of the checkboxes. 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. This will give you some performance improvement especially if you are using the code on a page that has a couple of tables. Then construct a selector of all cells matching this class using $tbl.find() to find all cells with the class name. In the click event of any of the checkboxes, use $(this).attr("name") to determine the class name of the checkbox that was clicked. 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.įrom jQuery 1.6 onwards, you should use prop() and not attr() Similarly you can even cache $(“#someTable”) for a tiny performance benefit. Start by caching the selector that selects all checkboxes inside the div grpChkBox. Var colToHide = $tbl.find("." + $(this).attr("name")) $chk.prop('checked', true) // check all checkboxes when page loads 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’.
0 Comments
Leave a Reply. |