高亮显示鼠标移到的某一行，兼容firefox、ie（6）、google，不覆盖奇偶行颜色（总结） -

Aubergine_kang

浏览: 264859 次
性别:
来自: 北京

最近访客更多访客>>

canca

eye_n

pyujiang

testjiang3

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

高亮显示鼠标移到的某一行，兼容firefox、ie（6）、google，不覆盖奇偶行颜色（总结）

博客分类：

js+css

下面代码可以直接运行查看结果，（同附件）

<html>
<head>
<style>
    .gray{background:#eee;cursor:pointer}
    .red{background:#FFFF00!important; cursor:pointer}
    </style>
       <script>
    function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
    window.onload = func;
    } else {
    window.onload = function() {
    oldonload();
    func();
    }
    }
    }
    function addClass(elem,value){
    if(!elem.className){
    elem.className=value;
    }else{
    var newClass=elem.className;
    newClass+=" ";
    newClass+=value;
    elem.className=newClass;
    }
    }
    function highLight(elemid,tagName,tagNameHighClass,crossTagNameClass){
    if(!document.getElementsByTagName) return false;
    if(!document.getElementById) return false;
    if(!document.getElementById(elemid)) return false;
    var elemid=document.getElementById(elemid);
    tagNames=elemid.getElementsByTagName(tagName);
    var odd=true;
    for(var i=0; i<tagNames.length; i++){
    if(odd==true){
    addClass(tagNames[i],tagNameHighClass)
    odd=false;
    }else{
    odd=true;
    }
    }
    for(var m=0; m<tagNames.length; m++){
    tagNames[m].oldClassName=tagNames[m].className;
    tagNames[m].onmouseover=function(){
    addClass(this,crossTagNameClass);
    }
    tagNames[m].onmouseout=function(){
    this.className=this.oldClassName;
    }
    }
    }
    function highLightItab(){
    highLight("b_g_date","tr","gray","red");
    }
    addLoadEvent(highLightItab);
   </script>
</head>
<body>
<table width="100%" id="b_g_date">

      <tr>
      <td>A1</td>
      <td>B1</td>
      </tr>
      <tr>
      <td>A2</td>
      <td>B2</td>
      </tr>
      <tr>
      <td>A3</td>
      <td>B3<td>
      </tr>
      <tr>
      <td>A4</td>
      <td>B4</td>
      </tr>
      <tr>
      <td>A5</td>
      <td>B5</td>
      </tr>
</body>
</html>

重点是标红部分，如果不那么些，

写作： .red{background:#FFFF00; cursor:pointer}

那么是没有高亮效果的

写作 .red{*background:#FFFF00!important; cursor:pointer}

也是没有没有高亮效果的

备注：table也可以这么写：

<table width="100%" id="b_g_date">
                <s:iterator value="users" status="status">
                    <s:url action="userDetail" id="goToHistory">
                        <s:param name="id" value="id" />
                    </s:url>
                    <tr class="<s:if test="#status.odd == true ">odd</s:if><s:else>even</s:else>">
                        <td width="5%"><a href="<s:property value="goToHistory"/>"><s:property value="#status.index" /></a></td>
                        <td width="20%"><s:property value="name" /></td>

                        <s:if test='callBarring=="1"'>
                        <td width="20%">True</td>
                        </s:if>
                        <s:else>
                        <td width="20%">False</td>
                        </s:else>
                        <td width="20%"><s:property value="role.name" /></td>
                        <c:choose>
                            <c:when test='${loginuser.role == 3 || loginuser.role == 4}'>
                            <td width="15%"><a href="update.action?simId=<s:property value="id"/>">Change</a></td>
                            </c:when>
                             <c:otherwise>
                             <td width="15%"></td>
                            </c:otherwise>
                        </c:choose>
                    </tr>
                </s:iterator>

参考.rar (21.8 KB)
下载次数: 0

分享到：