As the jQuery documentation states " If no argument is passed to the. Once we have the table header we need, we retrieve the index of the column header. 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.
#Mvc showhide based on dropdown selection code
Next observe the code inside the checkbox click event. 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. $tbl.find('tr :nth-child(' + (index + 1) + ')').toggle() Īs you can observe, we have changed a couple of things as compared to our previous example. Var colToHide = $tblhead.filter("." + $(this).attr("name")) Var $chk = $("#grpChkBox input:checkbox") In order to show/hide columns when the checkbox is clicked, use this code: The complete markup can be viewed in the source code accompanying this article. Observe this markup subset where the classes have been removed from all rows in the table body. 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.Ĭreate a new file called ‘HideShowColumnsOnIndex.html’. 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. 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. Live Demo: Show and Hide Columns in a Table using CheckBoxes Based on Header Index This is done using this simple line of code which toggles the visibility of the columns: Now all we need to do is show/hide it using toggle(). 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’. 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.
0 kommentar(er)
