<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".stripe tr").mouseover(
//如果鼠标移到class为stripe的表格的tr上时,执行函数
function() {
$(this).addClass("over");
}
).mouseout(
//给这行添加class值为over,并且当鼠标一出该行时执行函数
function(){
$(this).removeClass("over");
}
)
//给class为stripe的表格的偶数行添加class值为alt
$(".stripe tr:even").addClass("alt");
});
</script>
<style>
th {
background:#0066FF;
color:#FFFFFF;
line-height:20px;
height:30px;
}
td {
padding:6px 11px;
border-bottom:1px solid #95bce2;
vertical-align:top;
text-align:center;
}
tr.alt td {
background:#ecf6fc; /*这行将给所有的tr加上背景色*/
}
tr.over td {
background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/
}
</style>
<table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>姓名</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>邓国梁</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>gl.deng@gmail.com</td>
</tr>
</tbody>
</table>
table隔行变色
最新推荐文章于 2022-07-26 14:59:53 发布