[jQuery] Re: Show/hide multiple TDs with one function?

[Mike Alsup]

> I have a table with multiple TDs (with different classes) that I want
> to toggle (show/hide) with one function, from checking different
> checkboxes that relate to the different TDs.
>
> I'm thinking I should pass a variable to the function (from each
> checkbox) which then show/hides the different TDs using their class
> names, based on the variable passed. But I'm new to jQuery, so does
> anyone have a tip for how this could be done?

I've found that the best way to hide/show table columns is to simply
set/remove a class on the table element and then to define CSS rules
based on the class name.

For example, given this markup:

<input id="blah" type="checkbox" />
<table id="myTable">
    <tr><td class="one"><td class="two"></tr>
</table>

You define a CSS rule like this:

table.blah td.one { display: none }

Then you add a handler for the checkbox:

$('#blah').change(function() {
    if (this.checked)
       $('#myTable').addClass('blah');
    else
       $('#myTable').removeClass('blah');
});