$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).find("option:selected").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. Show/hide DIV on selection of ANY drop-down value How to show/hide DIV on selection of ANY drop-down value? The div blocks in the following example are hidden by default using the CSS “display” property, which is set to “none”. In this tutorial, we are going to see how to show/hide DIV on selection of ANY drop-down value? The following example shows how to show and hide div blocks based on a drop-down list using jQuery’s change() method in combination with show() and hide() methods.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |