---------------------------------------------------------b.htm<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="../css/style.css" rel="stylesheet" type="text/css">
<script language="JavaScript">
function showDetail(field) {
    if (field.childNodes[0].childNodes[0] != null) {
    window.open("basicInfoTZbShhModifyTMain.jsp?zbId=" + field.childNodes[0].childNodes[0].nodeValue, "rightFrame");
}
}
</script>
</head><body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" bgcolor="#EAE4C2" text="#000000">
<table width="325" border="0" align="center">
  <tr>
    <td>
  <table width="320" cellspacing="1" bgcolor="#0000cc">
        <tr align="center" class='tdtitlebackground'>   
          <td width="80">代 码</td>
      <td width="80">名 称</td>
      <td width="80">型 号</td> 
      <td width="80">配发时间</td> 
        </tr>
  </table>         
      <DIV style="position:relative;top:-1px;width:336px;height:120px;overflow-x:auto;overflow-y:auto"> 
        <table width="320" cellspacing="1" id="dataTable">          
          <tr ondblclick="showDetail(this)"> 
            <td style="display:none;">100</td>
            <td width="80"></td>
            <td width="80">桑塔纳</td>
            <td width="80">桑塔纳普通型卧车</td>
            <td width="80">1996-01-01</td>
          </tr>
          
          <tr ondblclick="showDetail(this)"> 
            <td style="display:none;">120</td>
            <td width="80"></td>
            <td width="80">桑塔纳</td>
            <td width="80">桑塔纳普通型卧车</td>
            <td width="80">1999-06-14</td>
          </tr>
          
          <tr ondblclick="showDetail(this)"> 
            <td style="display:none;">121</td>
            <td width="80"></td>
            <td width="80">桑塔纳</td>
            <td width="80">桑塔纳普通型卧车</td>
            <td width="80">1999-01-01</td>
          </tr>
          
          <tr ondblclick="showDetail(this)"> 
            <td style="display:none;">122</td>
            <td width="80"></td>
            <td width="80">桑塔纳</td>
            <td width="80">桑塔纳普通型卧车</td>
            <td width="80">1999-01-01</td>
          </tr>
          
          <tr ondblclick="showDetail(this)"> 
            <td style="display:none;">3384</td>
            <td width="80"></td>
            <td width="80">桑塔纳</td>
            <td width="80">桑塔纳普通型卧车</td>
            <td width="80">1996-06-17</td>
          </tr>
          
          <tr ondblclick="showDetail(this)"> 
            <td style="display:none;">3450</td>
            <td width="80"></td>
            <td width="80">桑塔纳</td>
            <td width="80">桑塔纳普通型卧车</td>
            <td width="80">1996-06-27</td>
          </tr>
          
          <tr ondblclick="showDetail(this)"> 
            <td style="display:none;">3699</td>
            <td width="80"></td>
            <td width="80">桑塔纳</td>
            <td width="80">桑塔纳普通型卧车</td>
            <td width="80">1997-03-03</td>
          </tr>
          
        </table>
      </div>
    </td>
  </tr>
</table>
</body>
</html>---------------------------
style.css里#dataTable td {
    behavior:url(../htc/tdBehavior.htc)

----------------------------------tdBehavior.htc<public:component>
<public:attach event="onmouseover" onevent="mouseOver()"/>
<public:attach event="onmouseout" onevent="mouseOut()"/>
<script language=javascript>
function mouseOver(){
    this.bgColor="#B9DAFB";
}function mouseOut(){
    this.bgColor="#FCFCFC";
}
</script>
</public:component>

解决方案 »

  1.   

    前几个月我也做这个效果也试了htc,本以为script在客户端应该没有效率问题,结果叫人失望。后来还是放弃htc,通过给table自定义属性(还是特定className属性记不清了)和attachEvent实现的。记得当时特意分了thead和tbody以区分不同的效果。代码写在一个全局js中,window.onload时attach过去的。
    好消息,迷失老大发贴了
    http://expert.csdn.net/Expert/topic/2286/2286729.xml?temp=.342312
      

  2.   

    我的一个日历本来也打算用htc的,不过那个慢啊,在单元格间移动变换背景色老是出现鼠标沙漏,后来不用了!
    循环 + attachEvent()