页面上行高亮显示方法

     页面行高亮显示是客户经常提出的要求,本文主要介绍使用jscript来达到这一效果。
     高亮:利用jscript支持方法简便循环找到指定行变色。
通过小例子来说明(下面蓝色代码)
<!--light-->
<HTML>
  <HEAD>
      <title>Qualifying (DHTML Dude)</title>
</HEAD>
< SCRIPT language=JavaScript> 
 
 
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"
          }       
      }        
}
</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>
效果:
补充: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。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值