Home/ Questions/Q 113891
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T02:46:26+00:00

I have an HTML table with several columns and I need to implement a

  • 0

I have an HTML table with several columns and I need to implement a column chooser using jQuery. When a user clicks on a checkbox I want to hide/show the corresponding column in the table. I would like to do this without attaching a class to every td in the table, is there a way to select an entire column using jQuery? Below is an example of the HTML.

<table>     <thead>         <tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th></tr>     </thead>     <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>     <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>     <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>     <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr> </table>  <form>     <input type="checkbox" name="col1" checked="checked" /> Hide/Show Column 1 <br />     <input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 <br />     <input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 <br /> </form>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. I would like to do this without attaching a class to every td

    Personally, I would go with the the class-on-each-td/th/col approach. Then you can switch columns on and off using a single write to className on the container, assuming style rules like:

    table.hide1 .col1 { display: none; } table.hide2 .col2 { display: none; } ...

    This is going to be faster than any JS loop approach; for really long tables it can make a significant difference to responsiveness.

    If you can get away with not supporting IE6, you could use adjacency selectors to avoid having to add the class attributes to tds. Or alternatively, if your concern is making the markup cleaner, you could add them from JavaScript automatically in an initialisation step.

    • 0