日志
jquery让表行交替变色变得简单
||
让表行隔行交替变色是一个很爽的事情，但是自己来写，总有不少缺陷，但是你有没有试过，将一个表格的class定义为一个东东，他就能交叉变色了？
jquery，就这么简单：
你只需要准备三个东西：
1、html表格：
<table class="asoft_table">
<tr>
1、html表格：
<table class="asoft_table">
<tr>
<td>
</td>
</tr>
.
.
.
</table>
</table>
2、JS代码，放到页面onload事件中即可(<body onload="asoft_table()">)：
2.1 引入jquery包
2.2 自定义函数
function asoft_table(){
$(".asoft_table tr:odd").addClass("tr_style1");
$(".asoft_table tr:even").addClass("tr_style2");
$(".asoft_table tr").hover(function(){$(this).addClass("tr_active");},function(){$(this).removeClass("tr_active");});
}
2.1 引入jquery包
2.2 自定义函数
function asoft_table(){
$(".asoft_table tr:odd").addClass("tr_style1");
$(".asoft_table tr:even").addClass("tr_style2");
$(".asoft_table tr").hover(function(){$(this).addClass("tr_active");},function(){$(this).removeClass("tr_active");});
}
3、css代码：
/* tr start*/
.tr_style1 {line-height: 21px;color: #000;background:#FFFFF9;}
.tr_style2 {line-height: 21px;color: #000;background:#ECF2F6;}
.tr_active {font-size: 9pt;line-height: 21px;color:#080;background:#DCE6EE;}
.tr_style1 {line-height: 21px;color: #000;background:#FFFFF9;}
.tr_style2 {line-height: 21px;color: #000;background:#ECF2F6;}
.tr_active {font-size: 9pt;line-height: 21px;color:#080;background:#DCE6EE;}
/* tr end*/
