Hiding table columns with jQuery

A nice example of hiding a table column using jQuery is here:

http://www.devcurry.com/2009/07/hide-table-column-with-single-line-of.html

That example shows how to hide a single column. How might you do it if you have a row of tickboxes, one for each column? Here is one way:

    $(“input”).each( function(i) {
        $(this).change(function() {
            var columnId = i + 1;
            if (this.checked) {
                $(“td:nth-child(” + columnId + “)”).show();
            }
            else {
                $(“td:nth-child(” + columnId + “)”).hide();
            }
        });
    });

You need to add one to the iteration counter because the iteration starts from 0 but the nth-child selection starts from 1.

This entry was posted in jQuery and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

HTML tags are not allowed.

517,762 Spambots Blocked by Simple Comments