title: Hide/Show Column in a HTML Table
body: <p>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.</p>
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;&lt;th class=&quot;col1&quot;&gt;Header 1&lt;/th&gt;&lt;th class=&quot;col2&quot;&gt;Header 2&lt;/th&gt;&lt;th class=&quot;col3&quot;&gt;Header 3&lt;/th&gt;&lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tr&gt;&lt;td&gt;Column1&lt;/td&gt;&lt;td&gt;Column2&lt;/td&gt;&lt;td&gt;Column3&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Column1&lt;/td&gt;&lt;td&gt;Column2&lt;/td&gt;&lt;td&gt;Column3&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Column1&lt;/td&gt;&lt;td&gt;Column2&lt;/td&gt;&lt;td&gt;Column3&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Column1&lt;/td&gt;&lt;td&gt;Column2&lt;/td&gt;&lt;td&gt;Column3&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;form&gt;
      &lt;input type=&quot;checkbox&quot; name=&quot;col1&quot; checked=&quot;checked&quot; /&gt; Hide/Show Column 1 &lt;br /&gt;
      &lt;input type=&quot;checkbox&quot; name=&quot;col2&quot; checked=&quot;checked&quot; /&gt; Hide/Show Column 2 &lt;br /&gt;
      &lt;input type=&quot;checkbox&quot; name=&quot;col3&quot; checked=&quot;checked&quot; /&gt; Hide/Show Column 3 &lt;br /&gt;
  &lt;/form&gt;
  </code></pre>