吴伟贤のBlog

Feed Rss

js 表格鼠标高亮效果

07.03.2008, js, by .

<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 width="100%" border="0" cellspacing="0" cellpadding="0" onMouseOver="MouseOver()" onClick="MouseClick()"  onmouseout="MouseOut()" style="cursor:pointer" bordercolordark="#ffffff"  bordercolorlight="#cccccc"  border="1" >
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
</table>

评论已关闭。