最近客户要求高亮选择列表的功能,于是顺便做了个,作为记录。
前台代码:
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 >
<! 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 >