表格颜色切换效果

<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 

bordercolorlight="#cccccc" bordercolordark="#ffffff" onClick="MouseClick()" 

onMouseOver="MouseOver()" 

onmouseout="MouseOut()" style="cursor: pointer;">

 

<tr>

    <td>123</td>

    <td>456</td>

    <td>789</td>

    <td>123</td>

    <td>121</td>

  </tr>

 

 

</table>