Hiding table columns with jQuery

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


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.

515,240 Spambots Blocked by Simple Comments