title: Table show/hide columns
body: <p>I have a typical table,</p>
  
  <p>7 columns, (paginated to 100 rows per time).</p>
  
  <p>What I want to do is have a <code>&lt;select multiple="multiple"&gt;</code> and have it list all the columns based off the name is the respective <code>&lt;th&gt;&lt;/th&gt;</code>, I then want to hook into the select onchange event, when a change occurs hide all columns that are <strong>not</strong> selected, for each column hidden decrease the colspan of the <code>&lt;tfoot&gt;</code> by 1.</p>
  
  <p>The table structure is:</p>
  
  <pre><code>&lt;table&gt;
   &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;first&lt;/th&gt;
      &lt;th&gt;second&lt;/th&gt;
      &lt;th&gt;third&lt;/th&gt;
      &lt;th&gt;fourth&lt;/th&gt;
      &lt;th&gt;fifth&lt;/th&gt;
      &lt;th&gt;sixth&lt;/th&gt;
      &lt;th&gt;seventh&lt;/th&gt;
    &lt;/tr&gt;
   &lt;/thead&gt;
   &lt;tbody&gt;
    &lt;tr&gt;
     &lt;td&gt;&lt;/td&gt;
     &lt;td&gt;&lt;/td&gt;
     &lt;td&gt;&lt;/td&gt;
     &lt;td&gt;&lt;/td&gt;
     &lt;td&gt;&lt;/td&gt;
     &lt;td&gt;&lt;/td&gt;
     &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
   &lt;/tbody&gt;
   &lt;tfoot&gt;
    &lt;tr&gt;
     &lt;td colspan="7"&gt;&lt;/td&gt;
    &lt;/tr&gt;
   &lt;/tfoot&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>and I suspect the ending select will look like:</p>
  
  <pre><code>&lt;select multiple="multiple"&gt;
   &lt;option value="1" selected="selected"&gt;first&lt;/option&gt;
   &lt;option value="2" selected="selected"&gt;second&lt;/option&gt;
   &lt;option value="3" selected="selected"&gt;third&lt;/option&gt;
   &lt;option value="4" selected="selected"&gt;fourth&lt;/option&gt;
   &lt;option value="5" selected="selected"&gt;fifth&lt;/option&gt;
   &lt;option value="6" selected="selected"&gt;sixth&lt;/option&gt;
   &lt;option value="7" selected="selected"&gt;seventh&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>