html表格table实现鼠标移入移出行变色的一种可用方法

js代码中取表格每行，设置它们的onmouseover和onmouseout函数：

function showtable() {
	var mainTable = document.getElementById("mainTable");
	var li = mainTable.getElementsByTagName("tr");
	for ( var i = 1; i <= li.length; i++) {
		li[i].style.backgroundColor = "transparent";
		li[i].onmouseover = function() {
			this.style.backgroundColor = "#0099FF";
		}
		li[i].onmouseout = function() {
			this.style.backgroundColor ="transparent";
		}
	}
}
showtable();

 

html中table注意一下将table的id要设置为"mainTable"：

  
    
  
  
  
    

    

        
鼠标移入移出行变色
    
    

        
列标题1
        
列标题2
        
类标题3
        
列标题4
        
列标题5
    
    

        
aaa
        
bbb
        
ccc
        
ddd
        
eee
    
    

        
AAA
        
BBB
        
CCC
        
DDD
        
EEE
    
    

        
FFF
        
GGG
        
HHH
        
III
        
JJJ
   

  

效果图：