Demo
Code
<script src="http://code.jquery.com/jquery-1.7.1.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#table tr").hover(
function() {
$(this).find("td").css('background-color', '#FF9966')
},
function() {
$(this).find("td").css('background-color', "WHITE");
}
);
});
</script>
<style type="text/css">
<!--
.style2 {color: #000000}
#table td,th{
border:1px solid #2A7FAA;}
-->
</style>
<table width="50%" id="table" style="border-collapse:collapse">
<thead>
<tr>
<th bgcolor="#2A7FAA"><span class="style2">Sl</span></th>
<th bgcolor="#2A7FAA"><span class="style2">Name</span></th>
<th bgcolor="#2A7FAA"><span class="style2">Mark</span></th>
</tr>
</thead>
<tr>
<td>1</td>
<td>Name1</td>
<td>90</td>
</tr>
<tr>
<td>2</td>
<td>Name2</td>
<td>80</td>
</tr>
<tr>
<td>3</td>
<td>Name3</td>
<td>95</td>
</tr>
</table>
Sl | Name | Mark |
---|---|---|
1 | Name1 | 90 |
2 | Name2 | 80 |
3 | Name3 | 95 |
Code
<script src="http://code.jquery.com/jquery-1.7.1.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#table tr").hover(
function() {
$(this).find("td").css('background-color', '#FF9966')
},
function() {
$(this).find("td").css('background-color', "WHITE");
}
);
});
</script>
<style type="text/css">
<!--
.style2 {color: #000000}
#table td,th{
border:1px solid #2A7FAA;}
-->
</style>
<table width="50%" id="table" style="border-collapse:collapse">
<thead>
<tr>
<th bgcolor="#2A7FAA"><span class="style2">Sl</span></th>
<th bgcolor="#2A7FAA"><span class="style2">Name</span></th>
<th bgcolor="#2A7FAA"><span class="style2">Mark</span></th>
</tr>
</thead>
<tr>
<td>1</td>
<td>Name1</td>
<td>90</td>
</tr>
<tr>
<td>2</td>
<td>Name2</td>
<td>80</td>
</tr>
<tr>
<td>3</td>
<td>Name3</td>
<td>95</td>
</tr>
</table>
Comments
Post a Comment