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 >
 
增值税 td >
< td >
 
消费税 td >
< td >
 
营业税 td >
< td > 小规模纳税人 td >
< td > 增值税小规模纳税人 td >
tr >
< tr >
< td class ="style2" > 张三 td >
< td class ="style1" >
123423432.12 td >
< td class ="style1" >
 
32445345.13 td >
< td class ="style1" >
 
345564.25 td >
< td class ="style1" > 567657567.78 td >
< td class ="style1" > 3454353453.90 td >
tr >
< tr >
< td class ="style2" > 李四 td >
< td class ="style1" >
 
34435345.34 td >
< td class ="style1" >
 
456546 td >
< td class ="style1" >
 
675675 td >
< td class ="style1" > 678879789 td >
< td class ="style1" > 34534534.0 td >
tr >
< tr >
< td class ="style2" > 王五 td >
< td class ="style1" >
 
23424 td >
< td class ="style1" >
 
6546 td >
< td class ="style1" >
 
67868 td >
< td class ="style1" > 980890 td >
< td class ="style1" > 45345 td >
tr >
< tr >
< td class ="style2" > 刘六 td >
< td class ="style1" >
 
234234 td >
< td class ="style1" >
 
123123 td >
< td class ="style1" >
 
324234 td >
< td class ="style1" > 342423 td >
< td class ="style1" > 345345 td >
tr >
< tr >
< td class ="style2" > 赵七 td >
< td class ="style1" >
 
345345 td >
< td class ="style1" >
 
546546 td >
< td class ="style1" >
 
567567 td >
< td class ="style1" > 67867867 td >
< td class ="style1" > 67867 td >
tr >
< tr >
< td class ="style2" > 王八 td >
< td class ="style1" >
 
345354 td >
< td class ="style1" >
 
345345 td >
< td class ="style1" >
 
5654 td >
< td class ="style1" > 567658678 td >
< td class ="style1" > 879879789 td >
tr >
< tr >
< td class ="style2" > 李九 td >
< td class ="style1" >
 
34535 td >
< td class ="style1" >
 
4534 td >
< td class ="style1" >
 
756765 td >
< td class ="style1" > 867867 td >
< td class ="style1" > 897987987 td >
tr >
< tr >
< td class ="style2" > 周十 td >
< td class ="style1" >
 
456434534 td >
< td class ="style1" >
546456  
td >
< td class ="style1" >
 
5675756 td >
< td class ="style1" > 67867867 td >
< td class ="style1" > 8797987 td >
tr >
table >
form >
body >
html >