Style Switcher

by MrTest

HTML

<p class="style-switcher">
    
    <select id="switch1">
        <option value="s1">Style1</option>
        <option value="s2">Style2</option>
        <option value="s3">Style3</option>
        <option value="s4">Style4</option>
    </select>
    <a id="switch-a" href="#">Switch!</a>
    <br /><br />
</p>
<div class="dataTables_wrapper">
    <p> Table Title</p>
    
    
    <table class="table-data">
        <thead>
            <tr>
                <th>Round #ID</th>
                <th>Reg</th>
                <th>Start Time</th>
                <th>Finish Time</th>
                <th>Site #ID</th>
            </tr>
        </thead>
        
        <tbody>
            <tr>
                <td>21</td>
                <td>RK59 KJM</td>
                <td>08:00</td>
                <td>12:00</td>
                <td>12</td>
            </tr>
            
        </tbody>
    </table>
    
    
    <p>Table Pagination</p>
</div>

CSS

.style-switcher { display: block; color: #444; font-size: 12px; width: 220px;}

.style-switcher select { width: 150px; display: inline-block; float: left; border: 1px solid #ccc; height: 25px; padding: 3px; line-height: 25px; margin-right: 5px; border-radius: 3px; box-shadow: 0px 0px 5px #ccc;}

.style-switcher a { width: 60px; text-align: center; display: block; display: inline-block; float: left; border: 1px solid #ccc; height: 23px; line-height: 23px; border-radius: 3px; box-shadow: 0px 0px 5px #ccc; color: #444; background: #fff; white-space: nowrap; }

.dataTables_wrapper p { width: 100%; clear: both; display: block; margin: 10px 0; }

.dataTables_wrapper table { border: 1px solid #444;}
.dataTables_wrapper table tr td, .dataTables_wrapper table tr th { border: 1px solid #444; padding: 3px; white-space: nowrap;}

table.s1 { background: #f00; }
table.s2 { background: #ff0; }
table.s3 { background: #00f; }
table.s4 { background: #0ff; }

JavaScript

$(function() {
    $('#switch-a').click(function(){
        $('#switch1').parent().next().children('table').addClass($('#switch1').val());
    });
});