一种实用的表格行鼠标点击高亮效果

时间:2022-04-23
本文章向大家介绍一种实用的表格行鼠标点击高亮效果,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

偶尔在看天天基金网净值公告时,从源代码里剥下的一段js代码,感觉比较实用,分享一下(仅IE有效)

<script  type="text/javascript">

var highlightcolor='#E0F2FE';

var clickcolor='#ffedd2';



function  MouseOver(){

    var source=event.srcElement;        

    if  (source.tagName=="TD"){        

        source=source.parentElement;

        var cells  =  source.children;    

        if  (cells[0].style.backgroundColor!=highlightcolor&&cells[0].style.backgroundColor!=clickcolor)

            for(i=0;i<cells.length;i++){

                cells[i].style.backgroundColor=highlightcolor;

            }        

    }

}



function  MouseOut(){    

    var source=event.srcElement;

    if  (source.tagName=="TD"){    

        source=source.parentElement;

        var cells  =  source.children;    

        if  (cells[0].style.backgroundColor!=clickcolor)    

            for(i=0;i<cells.length;i++){

                cells[i].style.backgroundColor="";

            }        

    }

}



function  MouseClick(){

    var source=event.srcElement;

    if  (source.tagName=="TD"){    

        source=source.parentElement;

        var cells  =  source.children;

        if  (cells[0].style.backgroundColor!=clickcolor)

            for(i=0;i<cells.length;i++)

                cells[i].style.backgroundColor=clickcolor;            

        else

            for(i=0;i<cells.length;i++)

                cells[i].style.backgroundColor="";    

    }

}

</script>



<table onmouseover="MouseOver()" onclick="MouseClick()"  onmouseout="MouseOut()" cellspacing="0" bordercolordark="#ffffff"  bordercolorlight="#cccccc"  border="1" width="80%" align="center" style="cursor:pointer">  

    <tr>

      <td>1</td>

      <td>a</td>

      <td>b</td>     

    </tr>

    <tr>

      <td>2</td>

      <td>c</td>

      <td>d</td>     

    </tr>

    <tr>

      <td>3</td>

      <td>e</td>

      <td>f </td>     

    </tr>  

    <tr>

      <td>4</td>

      <td>g</td>

      <td>h </td>     

    </tr>  

</table>