首页 新闻 会员 周边

table背景变色的问题

0
悬赏园豆：20 [已解决问题] 解决于 2012-07-26 11:05 
<table id="Phase1" class="gridview1" cellspacing="0" cellpadding="0" border="0" style="border-width:0px;border-collapse:collapse;">
  <tr onMouseOver="c=this.style.backgroundColor;this.style.backgroundColor=&#39;#E4F4FF&#39;;shownofile(this);" onMouseOut="this.style.backgroundColor=c;hiddennofile();">
    <td title="代理合同" class="gridviewleft" style="width:200px;height:30px;">&nbsp;&nbsp;<a href="filelist.aspx?id=673&col=a5&category=1">合同</a></td>
    <td class="gridviewcenter" rowspan="6" style="width:110px;">&nbsp;</td>
    <td class="gridviewcenter" rowspan="6" style="width:110px;">&nbsp;</td>
    <td class="gridviewcenter" rowspan="6" style="width:60px;">&nbsp;</td>
    <td class="gridviewcenter">4</td>
    <td style="width:120px;"></td>
    <td style="width:120px;"></td>
  </tr>
  <tr onMouseOver="c=this.style.backgroundColor;this.style.backgroundColor=&#39;#E4F4FF&#39;;" onMouseOut="this.style.backgroundColor=c;">
    <td title="公告" class="gridviewleft" style="width:200px;height:30px;">&nbsp;&nbsp;<a href="filelist.aspx?id=673&col=a6&category=1">公告</a></td>
    <td class="gridviewcenter">4</td>
    <td style="width:120px;"></td>
    <td style="width:120px;"></td>
  </tr>
  <tr onMouseOver="c=this.style.backgroundColor;this.style.backgroundColor=&#39;#E4F4FF&#39;" onMouseOut="this.style.backgroundColor=c">
    <td title="公告媒介" class="gridviewleft" style="width:200px;height:30px;">&nbsp;&nbsp;<a href="javascript:void(0)" onClick="ShowDiag('10','公告媒介')">公告媒介</a></td>
    <td class="gridviewcenter">1</td>
    <td style="width:120px;"></td>
    <td style="width:120px;"></td>
  </tr>
  <tr onMouseOver="c=this.style.backgroundColor;this.style.backgroundColor=&#39;#E4F4FF&#39;;" onMouseOut="this.style.backgroundColor=c;">
    <td title="招标文件" class="gridviewleft" style="width:200px;height:30px;">&nbsp;&nbsp;<a href="filelist.aspx?id=673&col=a20&category=1">招标文件</a></td>
    <td class="gridviewcenter">4</td>
    <td style="width:120px;"></td>
    <td style="width:120px;"></td>
  </tr>
  <tr onMouseOver="c=this.style.backgroundColor;this.style.backgroundColor=&#39;#E4F4FF&#39;" onMouseOut="this.style.backgroundColor=c">
    <td title="报名结束时间" class="gridviewleft" style="width:200px;height:30px;">&nbsp;&nbsp;<a href="javascript:void(0)" onClick="ShowDiag('13','报名结束时间')">报名结束时间</a></td>
    <td class="gridviewcenter">1</td>
    <td style="width:120px;"></td>
    <td style="width:120px;"></td>
  </tr>
  <tr onMouseOver="c=this.style.backgroundColor;this.style.backgroundColor=&#39;#E4F4FF&#39;" onMouseOut="this.style.backgroundColor=c">
    <td title="开标时间" class="gridviewleft" style="width:200px;height:30px;">&nbsp;&nbsp;<a href="javascript:void(0)" onClick="ShowDiag('24','开标时间')">开标时间</a></td>
    <td class="gridviewcenter">1</td>
    <td style="width:120px;"></td>
    <td style="width:120px;"></td>
  </tr>
</table>

上面代码中第一行的第2，3列设置了ROWSPAN合并了下面的行，在这情况下当鼠标移到第一行时，第2，3列的变色会从上至下都变了，有没有什么办法让合并的行不变色？

happydaily的主页 happydaily | 菜鸟二级 | 园豆：301
提问于：2012-07-26 08:38
< >
分享
最佳答案
0

建议把HTML代码与行为分离，用JS来实现：

function addEventHandler(oTarget,sEventType,fnHandler){
    if(oTarget.addEventListener){
        oTarget.addEventListener(sEventType,fnHandler,false);
    } else if(oTarget.attachEvent){
        oTarget.attachEvent("on"+sEventType,function(){
            return fnHandler.call(oTarget,window.event);
        });
    } else{
        oTarget["on"+sEventType]=fnHandler;
    }
}

function changeColor(){
    var trs=document.getElementById("Phase1").getElementsByTagName("tr");
    if(trs.length){
        for(var m=0,n=trs.length;m<n;m++){
            var currentColor=trs[m].style.backgroundColor,
                hoverColor="#E4F4FF";
            if(m==0){
                addEventHandler(trs[m],"mouseover",function(){
                    var tds=this.getElementsByTagName("td");
                    for(var i=0,j=tds.length;i<j;i++){
                        if(i!=1 && i!=2 && i!=3){
                            tds[i].style.backgroundColor=hoverColor;
                        }
                    }
                });
                addEventHandler(trs[m],"mouseout",function(){
                    var tds=this.getElementsByTagName("td");
                    for(var i=0,j=tds.length;i<j;i++){
                        tds[i].style.backgroundColor=currentColor;
                    }
                });
            }else{
                addEventHandler(trs[m],"mouseover",function(){
                    this.style.backgroundColor=hoverColor;
                });
                addEventHandler(trs[m],"mouseout",function(){
                    this.style.backgroundColor=currentColor;
                });
            }
        }
    }
}

window.onload=changeColor;

然后去掉HTML代码中的：

onMouseOver="c=this.style.backgroundColor;this.style.backgroundColor=&#39;#E4F4FF&#39;" onMouseOut="this.style.backgroundColor=c"

DEMO：http://jscode.chinacxy.com/code/4102657f78b10bca122c5abf6eda3cda.aspx

收获园豆：20
artwl | 专家六级 |园豆：16736 | 2012-07-26 10:51

看来只有用JS来实现了

happydaily | 园豆：301 (菜鸟二级) | 2012-07-26 11:05
其他回答(1)
0

把中间这一行的颜色 悬浮显示白色就OK了。

秋风sao落叶 | 园豆：44 (初学一级) | 2012-07-26 09:25
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。