日期:2014-05-17  浏览次数:20699 次

多行记录点击显示不同的CSS样式
可以在Table或tr中添加以下方法:onmouseover="MouseOver()" onclick="MouseClick()"  onmouseout="MouseOut()",有了这些方法便可实现CSS样式的变化,具体的js如下:
<script  type="text/javascript">
var highlightcolor='#E0F2FE';
var clickcolor='#ffedd2';
function  MouseOver(){
    var source=event.srcElement;        
    if  (source.tagName=="TD"){  //注意这里的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"){    //注意这里的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"){    //注意这里的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>


注意这里的TD是大写,也可以小写,根据自己在Table中的定义的TD是大写还是小写。
这里有个静态页面,可以看到演示效果。