css tr 变红,jQuery+css打造table中奇偶行不同样式鼠标移上tr变色

jQuery+css打造table中奇偶行不同样式鼠标移上tr变色

代码如下：

/p>

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

无标题文档

$(document).ready(function(){

$(".stripe tr").mouseover(function(){

//如果鼠标移到class为stripe的表格的tr上时，执行函数

$(this).addClass("over");}).mouseout(function(){

//给这行添加class值为over，并且当鼠标一出该行时执行函数

$(this).removeClass("over");}) //移除该行的class

$(".stripe tr:even").addClass("alt");

//给class为stripe的表格的偶数行添加class值为alt

});

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;

}

td * {

padding:6px 11px;

}

tr.alt td {

background:#ecf6fc;

}

tr.over td {

background:#bcd4ec;

}

cellspacing="0" cellpadding="0">

姓名年龄QQEmail

邓国梁2331540205gl.deng@gmail.com邓国梁2331540205gl.deng@gmail.com邓国梁2331540205gl.deng@gmail.com邓国梁2331540205gl.deng@gmail.com邓国梁2331540205gl.deng@gmail.com邓国梁2331540205gl.deng@gmail.com