Looking to swap multiple tables with a Javascript function, each one I try breaks horribly. I'd like the first table to show on page load, and then the rest to load as a different option is selected.
Any help would be greatly appreciated!
Here's the basic code:
<select id="tableSwapper">
<option value="table1">Table 1</option>
<option value="table2">Table 2</option>
</select>
<table id="table1" class="table table-bordered box" >
<thead>
<tr>
<th>Points</th>
<th>ARS</th>
<th>ASV</th>
<th>BUR</th>
<th>CHE</th>
<th>CRY</th>
<th>EVE</th>
<th>HUL</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>02</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>03</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>04</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>05</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
</tbody>
</table>
</div>
<table id="table2" class="table table-bordered box" >
<thead>
<tr>
<th>TEAM</th>
<th>ARS</th>
<th>ASV</th>
<th>BUR</th>
<th>CHE</th>
<th>CRY</th>
<th>EVE</th>
<th>HUL</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>02</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>03</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>04</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>05</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
</tbody>
</table>
Here's the link to the basic setup:
Try jQuery show() and hide():