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

菩提树下的杨过

发布于 2018-01-22 12:13:14

1.1K00

代码可运行

文章被收录于专栏：菩提树下的杨过菩提树下的杨过

运行总次数：0

代码可运行

偶尔在看天天基金网净值公告时，从源代码里剥下的一段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>