<html>
<head><title></title>
<script src="jquery-3.1.0.js"></script>
<script>
$(document).ready(function()
{
$("#table1").addClass("Blue");
$("#s1").change(function () {
var str = $(this).val();
$("#table1").removeClass();
$("#table1").addClass(str);
});
});
</script>
<style>
.Red
{
border:2px solid red;
border-collapse:collapse;
}
.Red th
{
background-color:red;
color:white;
border:2px solid White;
padding:10px;
}
.Red td
{
background-color:Red;
color:black;
border:2px solid black;
padding:10px;
text-align:center;
}
.Blue
{
border:2px solid blue;
border-collapse:collapse;
}
.Blue th
{
background-color:blue;
color:white;
border:2px solid skyblue;
padding:10px;
}
.Blue td
{
background-color:skyblue;
color:black;
border:2px solid black;
padding:10px;
text-align:center;
}
.Green
{
border:2px solid green;
border-collapse:collapse;
}
.Green th
{
background-color:green;
color:white;
border:2px solid lightgreen;
padding:10px;
}
.Green td
{
background-color:lightgreen;
color:black;
border:2px solid black;
padding:10px;
text-align:center;
}
</style>
</head>
<body>
<h1> Applying styles using jQuery </h1>
Select Theme<select id="s1">
<option vlaue="Blue">Blue Theme </option>
<option vlaue="Green">Green Theme </option>
<option vlaue="Red">Red Theme </option>
</select><br/><br />
<table border="1" width="500" id="table1">
<tr>
<th>Student Id</th>
<th>Student Name</th>
<th>Student Course</th>
<th>Student Duration</th>
</tr>
<tr><td>101 </td><td>scott</td>
<td>MVC</td><td>45</td>
</tr>
<tr><td>102 </td><td>tiger</td>
<td>WCF</td><td>35</td>
</tr>
<tr><td>103 </td><td>mark</td>
<td>Jquery</td><td>40</td>
</tr>
</table>
</body>
</html>
OutPut
