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