页面行高亮显示是客户经常提出的要求,本文主要介绍使用jscript来达到这一效果。
高亮:利用jscript支持方法简便循环找到指定行变色。
通过小例子来说明(下面蓝色代码)
![](http://blog.csdn.net/images/blog_csdn_net/xjjcn/t1.jpg)
<!--light-->
<HTML>
<HEAD>
<title>Qualifying (DHTML Dude)</title>
</HEAD>
<HEAD>
<title>Qualifying (DHTML Dude)</title>
</HEAD>
<
SCRIPT language=JavaScript>
function changeColor(){
function changeColor(){
var strMark
var objMark
tbody = document.getElementById("colorTable")
for (i=0;i<tbody.rows.length-1;i++){
tbody.rows[i+1].bgColor="#f5f5f5"
strMark = "document.form1.Id_Sel" + i +".checked"
objMark = eval(strMark)
if (objMark==true){
tbody.rows[i+1].bgColor="#FFFF9C"
}
}
}
var objMark
tbody = document.getElementById("colorTable")
for (i=0;i<tbody.rows.length-1;i++){
tbody.rows[i+1].bgColor="#f5f5f5"
strMark = "document.form1.Id_Sel" + i +".checked"
objMark = eval(strMark)
if (objMark==true){
tbody.rows[i+1].bgColor="#FFFF9C"
}
}
}
</SCRIPT>
<BODY>
<BR><CENTER>Canadian Grand Prix Qualifying</CENTER><BR>
<form name="form1">
<TABLE id="colorTable"
BORDER: black 0px solid;
WIDTH: 99%;
background-color:#eeeecc;"
borderColor=#999999
cellSpacing=0
cellPadding=1
border=1
dragcolor="gray"
slcolor=#ffffcc hlcolor=#BEC5DE οnclick="changeColor();">
<TR align="center" style="background:#C0C0C0;">
<TD width=20>
rad
</td>
<TD width=120>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
StartDate
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
<TD width=120>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
EndDate
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
<TD width=300>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Name
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
<TD width=50><DIV style="text-align:center; vertical-align:top; font:12pt/1.2; margin:0px; border:0px;">Degrade</DIV></TD>
<TD width=80>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Class
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
<TD width=50><DIV style="text-align:center; vertical-align:top; font:12pt/1.2; margin:0px; border:0px;">Kindof</DIV></TD>
<TD width=100>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Number
</DIV>
</BUTTON>
</DIV>
</DIV>
</TD>
<TD width=50><DIV style="text-align:center; vertical-align:top; font:12pt/1.2; margin:0px; border:0px;">CD</DIV></TD>
<TD width=50><DIV style="text-align:center; vertical-align:top; font:12pt/1.2; margin:0px; border:0px;">M</DIV></TD>
<TD width=80><DIV style="text-align:center; vertical-align:top; font:12pt/1.2; margin:0px; border:0px;">Detail</DIV></TD>
</TR>
<LABEL for="Id_Sel0">
<TR style="cursor:hand;" bgColor='#f5f5f5' οnmοuseοver="if (this.bgColor!='#ffff9c'){this.bgColor='#fff6ab'}" οnmοuseοut="if (this.bgColor!='#ffff9c'){this.bgColor='#f5f5f5'}">
<TD><INPUT type=radio value="0" name="radioNo" ID="Id_Sel0"></TD>
<TD>2005-12-12</TD>
<TD>2006-01-12</TD>
<TD>Jordan</TD>
<TD>1</TD>
<TD>01</TD>
<TD>water</TD>
<TD>642,265</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button1
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
</label>
<LABEL for="Id_Sel1">
<TR style="cursor:hand;" bgColor='#f5f5f5' οnmοuseοver="if (this.bgColor!='#ffff9c'){this.bgColor='#fff6ab'}" οnmοuseοut="if (this.bgColor!='#ffff9c'){this.bgColor='#f5f5f5'}">
<TD><INPUT type=radio value="1" name="radioNo" ID="Id_Sel1"></TD>
<TD>2005-12-12</TD>
<TD>2006-01-12</TD>
<TD>Honda</TD>
<TD>2</TD>
<TD>02</TD>
<TD>water</TD>
<TD>642,376</TD>
<TD>3</TD>
<TD>Min</TD>
<TD><DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button2
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
</label>
<LABEL for="Id_Sel2">
<TR style="cursor:hand;" bgColor='#f5f5f5' οnmοuseοver="if (this.bgColor!='#ffff9c'){this.bgColor='#fff6ab'}" οnmοuseοut="if (this.bgColor!='#ffff9c'){this.bgColor='#f5f5f5'}">
<TD><INPUT type=radio value="2" name="radioNo" ID="Id_Sel2"></TD>
<TD>2004-10-12</TD>
<TD>2006-01-12</TD>
<TD>BAR</TD>
<TD>3</TD>
<TD>03</TD>
<TD>water</TD>
<TD>545,376</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button3
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
</label>
<LABEL for="Id_Sel3">
<TR style="cursor:hand;" bgColor='#f5f5f5' οnmοuseοver="if (this.bgColor!='#ffff9c'){this.bgColor='#fff6ab'}" οnmοuseοut="if (this.bgColor!='#ffff9c'){this.bgColor='#f5f5f5'}">
<TD><INPUT type=radio value="3" name="radioNo" ID="Id_Sel3"></TD>
<TD>2004-11-12</TD>
<TD>2006-01-12</TD>
<TD>Sauber</TD>
<TD>1</TD>
<TD>01</TD>
<TD>water</TD>
<TD>585,466</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button4
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
</label>
<LABEL for="Id_Sel4">
<TR style="cursor:hand;" bgColor='#f5f5f5' οnmοuseοver="if (this.bgColor!='#ffff9c'){this.bgColor='#fff6ab'}" οnmοuseοut="if (this.bgColor!='#ffff9c'){this.bgColor='#f5f5f5'}">
<TD><INPUT type=radio value="4" name="radioNo" ID="Id_Sel4"></TD>
<TD>2004-12-11</TD>
<TD>2006-01-12</TD>
<TD>Sauber</TD>
<TD>2</TD>
<TD>02</TD>
<TD>water</TD>
<TD>-585,466</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button5
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
</label>
<LABEL for="Id_Sel5">
<TR style="cursor:hand;" bgColor='#f5f5f5' οnmοuseοver="if (this.bgColor!='#ffff9c'){this.bgColor='#fff6ab'}" οnmοuseοut="if (this.bgColor!='#ffff9c'){this.bgColor='#f5f5f5'}">
<TD><INPUT type=radio value="5" name="radioNo" ID="Id_Sel5"></TD>
<TD>2004-12-13</TD>
<TD>2006-01-16</TD>
<TD>Jaguar</TD>
<TD>3</TD>
<TD>03</TD>
<TD>water</TD>
<TD>0.585466</TD>
<TD>3</TD>
<TD>Max</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button6
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
</label>
<LABEL for="Id_Sel6">
<TR style="cursor:hand;" bgColor='#f5f5f5' οnmοuseοver="if (this.bgColor!='#ffff9c'){this.bgColor='#fff6ab'}" οnmοuseοut="if (this.bgColor!='#ffff9c'){this.bgColor='#f5f5f5'}">
<TD><INPUT type=radio value="6" name="radioNo" ID="Id_Sel6"></TD>
<TD>2004-12-14</TD>
<TD>2006-01-17</TD>
<TD>Jaguar</TD>
<TD>1</TD>
<TD>04</TD>
<TD>water</TD>
<TD>585,466</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button7
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
</label>
<LABEL for="Id_Sel7">
<TR style="cursor:hand;" bgColor='#f5f5f5' οnmοuseοver="if (this.bgColor!='#ffff9c'){this.bgColor='#fff6ab'}" οnmοuseοut="if (this.bgColor!='#ffff9c'){this.bgColor='#f5f5f5'}">
<TD><INPUT type=radio value="7" name="radioNo" ID="Id_Sel7"></TD>
<TD>2004-12-21</TD>
<TD>2006-02-16</TD>
<TD>Lotus</TD>
<TD>2</TD>
<TD>05</TD>
<TD>water</TD>
<TD>-585,766</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button8
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
</label>
<LABEL for="Id_Sel8">
<TR style="cursor:hand;" bgColor='#f5f5f5' οnmοuseοver="if (this.bgColor!='#ffff9c'){this.bgColor='#fff6ab'}" οnmοuseοut="if (this.bgColor!='#ffff9c'){this.bgColor='#f5f5f5'}">
<TD><INPUT type=radio value="8" name="radioNo" ID="Id_Sel8"></TD>
<TD>2005-12-15</TD>
<TD>2006-03-16</TD>
<TD>Ferrari</TD>
<TD>3</TD>
<TD>06</TD>
<TD>water</TD>
<TD>5,854,660</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button9
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
</label>
<LABEL for="Id_Sel9">
<TR style="cursor:hand;" bgColor='#f5f5f5' οnmοuseοver="if (this.bgColor!='#ffff9c'){this.bgColor='#fff6ab'}" οnmοuseοut="if (this.bgColor!='#ffff9c'){this.bgColor='#f5f5f5'}">
<TD><INPUT type=radio value="9" name="radioNo" ID="Id_Sel9"></TD>
<TD>2005-12-15</TD>
<TD>2006-03-19</TD>
<TD>Ferrari</TD>
<TD>1</TD>
<TD>07</TD>
<TD>water</TD>
<TD>985,466</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button10
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
</TABLE>
</form>
</BODY>
</HTML>
<BODY>
<BR><CENTER>Canadian Grand Prix Qualifying</CENTER><BR>
<form name="form1">
<TABLE id="colorTable"
BORDER: black 0px solid;
WIDTH: 99%;
background-color:#eeeecc;"
borderColor=#999999
cellSpacing=0
cellPadding=1
border=1
dragcolor="gray"
slcolor=#ffffcc hlcolor=#BEC5DE οnclick="changeColor();">
<TR align="center" style="background:#C0C0C0;">
<TD width=20>
rad
</td>
<TD width=120>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
StartDate
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
<TD width=120>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
EndDate
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
<TD width=300>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Name
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
<TD width=50><DIV style="text-align:center; vertical-align:top; font:12pt/1.2; margin:0px; border:0px;">Degrade</DIV></TD>
<TD width=80>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Class
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
<TD width=50><DIV style="text-align:center; vertical-align:top; font:12pt/1.2; margin:0px; border:0px;">Kindof</DIV></TD>
<TD width=100>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Number
</DIV>
</BUTTON>
</DIV>
</DIV>
</TD>
<TD width=50><DIV style="text-align:center; vertical-align:top; font:12pt/1.2; margin:0px; border:0px;">CD</DIV></TD>
<TD width=50><DIV style="text-align:center; vertical-align:top; font:12pt/1.2; margin:0px; border:0px;">M</DIV></TD>
<TD width=80><DIV style="text-align:center; vertical-align:top; font:12pt/1.2; margin:0px; border:0px;">Detail</DIV></TD>
</TR>
<LABEL for="Id_Sel0">
<TR style="cursor:hand;" bgColor='#f5f5f5' οnmοuseοver="if (this.bgColor!='#ffff9c'){this.bgColor='#fff6ab'}" οnmοuseοut="if (this.bgColor!='#ffff9c'){this.bgColor='#f5f5f5'}">
<TD><INPUT type=radio value="0" name="radioNo" ID="Id_Sel0"></TD>
<TD>2005-12-12</TD>
<TD>2006-01-12</TD>
<TD>Jordan</TD>
<TD>1</TD>
<TD>01</TD>
<TD>water</TD>
<TD>642,265</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button1
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
</label>
<LABEL for="Id_Sel1">
<TR style="cursor:hand;" bgColor='#f5f5f5' οnmοuseοver="if (this.bgColor!='#ffff9c'){this.bgColor='#fff6ab'}" οnmοuseοut="if (this.bgColor!='#ffff9c'){this.bgColor='#f5f5f5'}">
<TD><INPUT type=radio value="1" name="radioNo" ID="Id_Sel1"></TD>
<TD>2005-12-12</TD>
<TD>2006-01-12</TD>
<TD>Honda</TD>
<TD>2</TD>
<TD>02</TD>
<TD>water</TD>
<TD>642,376</TD>
<TD>3</TD>
<TD>Min</TD>
<TD><DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button2
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
</label>
<LABEL for="Id_Sel2">
<TR style="cursor:hand;" bgColor='#f5f5f5' οnmοuseοver="if (this.bgColor!='#ffff9c'){this.bgColor='#fff6ab'}" οnmοuseοut="if (this.bgColor!='#ffff9c'){this.bgColor='#f5f5f5'}">
<TD><INPUT type=radio value="2" name="radioNo" ID="Id_Sel2"></TD>
<TD>2004-10-12</TD>
<TD>2006-01-12</TD>
<TD>BAR</TD>
<TD>3</TD>
<TD>03</TD>
<TD>water</TD>
<TD>545,376</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button3
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
</label>
<LABEL for="Id_Sel3">
<TR style="cursor:hand;" bgColor='#f5f5f5' οnmοuseοver="if (this.bgColor!='#ffff9c'){this.bgColor='#fff6ab'}" οnmοuseοut="if (this.bgColor!='#ffff9c'){this.bgColor='#f5f5f5'}">
<TD><INPUT type=radio value="3" name="radioNo" ID="Id_Sel3"></TD>
<TD>2004-11-12</TD>
<TD>2006-01-12</TD>
<TD>Sauber</TD>
<TD>1</TD>
<TD>01</TD>
<TD>water</TD>
<TD>585,466</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button4
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
</label>
<LABEL for="Id_Sel4">
<TR style="cursor:hand;" bgColor='#f5f5f5' οnmοuseοver="if (this.bgColor!='#ffff9c'){this.bgColor='#fff6ab'}" οnmοuseοut="if (this.bgColor!='#ffff9c'){this.bgColor='#f5f5f5'}">
<TD><INPUT type=radio value="4" name="radioNo" ID="Id_Sel4"></TD>
<TD>2004-12-11</TD>
<TD>2006-01-12</TD>
<TD>Sauber</TD>
<TD>2</TD>
<TD>02</TD>
<TD>water</TD>
<TD>-585,466</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button5
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
</label>
<LABEL for="Id_Sel5">
<TR style="cursor:hand;" bgColor='#f5f5f5' οnmοuseοver="if (this.bgColor!='#ffff9c'){this.bgColor='#fff6ab'}" οnmοuseοut="if (this.bgColor!='#ffff9c'){this.bgColor='#f5f5f5'}">
<TD><INPUT type=radio value="5" name="radioNo" ID="Id_Sel5"></TD>
<TD>2004-12-13</TD>
<TD>2006-01-16</TD>
<TD>Jaguar</TD>
<TD>3</TD>
<TD>03</TD>
<TD>water</TD>
<TD>0.585466</TD>
<TD>3</TD>
<TD>Max</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button6
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
</label>
<LABEL for="Id_Sel6">
<TR style="cursor:hand;" bgColor='#f5f5f5' οnmοuseοver="if (this.bgColor!='#ffff9c'){this.bgColor='#fff6ab'}" οnmοuseοut="if (this.bgColor!='#ffff9c'){this.bgColor='#f5f5f5'}">
<TD><INPUT type=radio value="6" name="radioNo" ID="Id_Sel6"></TD>
<TD>2004-12-14</TD>
<TD>2006-01-17</TD>
<TD>Jaguar</TD>
<TD>1</TD>
<TD>04</TD>
<TD>water</TD>
<TD>585,466</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button7
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
</label>
<LABEL for="Id_Sel7">
<TR style="cursor:hand;" bgColor='#f5f5f5' οnmοuseοver="if (this.bgColor!='#ffff9c'){this.bgColor='#fff6ab'}" οnmοuseοut="if (this.bgColor!='#ffff9c'){this.bgColor='#f5f5f5'}">
<TD><INPUT type=radio value="7" name="radioNo" ID="Id_Sel7"></TD>
<TD>2004-12-21</TD>
<TD>2006-02-16</TD>
<TD>Lotus</TD>
<TD>2</TD>
<TD>05</TD>
<TD>water</TD>
<TD>-585,766</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button8
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
</label>
<LABEL for="Id_Sel8">
<TR style="cursor:hand;" bgColor='#f5f5f5' οnmοuseοver="if (this.bgColor!='#ffff9c'){this.bgColor='#fff6ab'}" οnmοuseοut="if (this.bgColor!='#ffff9c'){this.bgColor='#f5f5f5'}">
<TD><INPUT type=radio value="8" name="radioNo" ID="Id_Sel8"></TD>
<TD>2005-12-15</TD>
<TD>2006-03-16</TD>
<TD>Ferrari</TD>
<TD>3</TD>
<TD>06</TD>
<TD>water</TD>
<TD>5,854,660</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button9
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
</label>
<LABEL for="Id_Sel9">
<TR style="cursor:hand;" bgColor='#f5f5f5' οnmοuseοver="if (this.bgColor!='#ffff9c'){this.bgColor='#fff6ab'}" οnmοuseοut="if (this.bgColor!='#ffff9c'){this.bgColor='#f5f5f5'}">
<TD><INPUT type=radio value="9" name="radioNo" ID="Id_Sel9"></TD>
<TD>2005-12-15</TD>
<TD>2006-03-19</TD>
<TD>Ferrari</TD>
<TD>1</TD>
<TD>07</TD>
<TD>water</TD>
<TD>985,466</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button10
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
</TABLE>
</form>
</BODY>
</HTML>
效果:
![](http://blog.csdn.net/images/blog_csdn_net/xjjcn/t2.jpg)
补充:changeColor函数也可以放在Table中的<Tr>中
例如:
<TR style="HEIGHT: 26px; cursor:hand;" bgColor='#f5f5f5' οnclick="changeColor('<%=i%>');" οnmοuseοver="if (this.bgColor!='#ffff9c'){this.bgColor='#fff6ab'}" οnmοuseοut="if (this.bgColor!='#ffff9c'){this.bgColor='#f5f5f5'}">
注意需要行号作为参数了,这种方法适合循环自动生成行的Table。