Table表格的隔行变色，高亮选择当前行效果

最近客户要求高亮选择列表的功能，于是顺便做了个，作为记录。

前台代码：

View Code

<% @ Page Language = " C# " AutoEventWireup = " true " CodeFile = " Default.aspx.cs " Inherits = " _Default " %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > JQuer的鼠标悬浮，鼠标高亮效果 </ title >
< style type ="text/css" >
#header
{
background-color : #00ffff ;
text-align : center ;
}
.style1
{
text-align : right ;
}
.style2
{
text-align : center ;
}
</ style >
< link href ="tables.css" rel ="stylesheet" type ="text/css" />
< script src ="JS/jquery-1.4.2.min.js" type ="text/javascript" ></ script >
< script type ="text/javascript" >
$(document).ready( function () {
doChangeColorOfRow( " #tableThis tr:even:not(#header) " , " #tableThis tr:odd:not(#header) " );
});

function doChangeColorOfRow(evenTR, oddTR) {
$(evenTR).each( function () {
$( this ).css( " background-color " , " #F0F8FF " ).bind( " mouseover " , function () {
if ($( this ).css( " background-color " ) != " #ffff00 " ) {
$( this ).css( " background-color " , " #D8FAD8 " );
}
}).bind( " mouseout " , function () {
if ($( this ).css( " background-color " ) != " #ffff00 " ) {
$( this ).css( " background-color " , " #F0F8FF " );
}
}).bind( " click " , function () {
$(evenTR).each( function () {
if ($( this ).css( " background-color " ) == " #ffff00 " ) {
$( this ).css( " background-color " , " #F0F8FF " );
}
});
$(oddTR).each( function () {
if ($( this ).css( " background-color " ) == " #ffff00 " ) {
$( this ).css( " background-color " , " #ffffff " );
}
});
$( this ).css( " background-color " , " #ffff00 " );
});
});
$(oddTR).each( function () {
$( this ).css( " background-color " , " #ffffff " ).bind( " mouseover " , function () {
if ($( this ).css( " background-color " ) != " #ffff00 " ) {
$( this ).css( " background-color " , " #D8FAD8 " );
}
}).bind( " mouseout " , function () {
if ($( this ).css( " background-color " ) != " #ffff00 " ) {
$( this ).css( " background-color " , " #ffffff " );
}
}).bind( " click " , function () {
$(evenTR).each( function () {
if ($( this ).css( " background-color " ) == " #ffff00 " ) {
$( this ).css( " background-color " , " #F0F8FF " );
}
});
$(oddTR).each( function () {
if ($( this ).css( " background-color " ) == " #ffff00 " ) {
$( this ).css( " background-color " , " #ffffff " );
}
});
$( this ).css( " background-color " , " #ffff00 " );
});
});
}

</ script >
</ head >
< body >
< form id ="form1" runat ="server" >
< table style ="width: 100%;" cellpadding ="0" cellspacing ="0" id ="tableThis" >
< tr id ="header" >
< td > 纳税人 </ td >
< td >
&nbsp;
增值税 </ td >
< td >
&nbsp;
消费税 </ td >
< td >
&nbsp;
营业税 </ td >
< td > 小规模纳税人 </ td >
< td > 增值税小规模纳税人 </ td >
</ tr >
< tr >
< td class ="style2" > 张三 </ td >
< td class ="style1" >
123423432.12 </ td >
< td class ="style1" >
&nbsp;
32445345.13 </ td >
< td class ="style1" >
&nbsp;
345564.25 </ td >
< td class ="style1" > 567657567.78 </ td >
< td class ="style1" > 3454353453.90 </ td >
</ tr >
< tr >
< td class ="style2" > 李四 </ td >
< td class ="style1" >
&nbsp;
34435345.34 </ td >
< td class ="style1" >
&nbsp;
456546 </ td >
< td class ="style1" >
&nbsp;
675675 </ td >
< td class ="style1" > 678879789 </ td >
< td class ="style1" > 34534534.0 </ td >
</ tr >
< tr >
< td class ="style2" > 王五 </ td >
< td class ="style1" >
&nbsp;
23424 </ td >
< td class ="style1" >
&nbsp;
6546 </ td >
< td class ="style1" >
&nbsp;
67868 </ td >
< td class ="style1" > 980890 </ td >
< td class ="style1" > 45345 </ td >
</ tr >
< tr >
< td class ="style2" > 刘六 </ td >
< td class ="style1" >
&nbsp;
234234 </ td >
< td class ="style1" >
&nbsp;
123123 </ td >
< td class ="style1" >
&nbsp;
324234 </ td >
< td class ="style1" > 342423 </ td >
< td class ="style1" > 345345 </ td >
</ tr >
< tr >
< td class ="style2" > 赵七 </ td >
< td class ="style1" >
&nbsp;
345345 </ td >
< td class ="style1" >
&nbsp;
546546 </ td >
< td class ="style1" >
&nbsp;
567567 </ td >
< td class ="style1" > 67867867 </ td >
< td class ="style1" > 67867 </ td >
</ tr >
< tr >
< td class ="style2" > 王八 </ td >
< td class ="style1" >
&nbsp;
345354 </ td >
< td class ="style1" >
&nbsp;
345345 </ td >
< td class ="style1" >
&nbsp;
5654 </ td >
< td class ="style1" > 567658678 </ td >
< td class ="style1" > 879879789 </ td >
</ tr >
< tr >
< td class ="style2" > 李九 </ td >
< td class ="style1" >
&nbsp;
34535 </ td >
< td class ="style1" >
&nbsp;
4534 </ td >
< td class ="style1" >
&nbsp;
756765 </ td >
< td class ="style1" > 867867 </ td >
< td class ="style1" > 897987987 </ td >
</ tr >
< tr >
< td class ="style2" > 周十 </ td >
< td class ="style1" >
&nbsp;
456434534 </ td >
< td class ="style1" >
546456 &nbsp;
</ td >
< td class ="style1" >
&nbsp;
5675756 </ td >
< td class ="style1" > 67867867 </ td >
< td class ="style1" > 8797987 </ td >
</ tr >
</ table >
</ form >
</ body >
</ html >