html鼠标移入移出点击,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"：

鼠标移入移出行变色.html

鼠标移入移出行变色
列标题1	列标题2	类标题3	列标题4	列标题5
aaa	bbb	ccc	ddd	eee
AAA	BBB	CCC	DDD	EEE
FFF	GGG	HHH	III	JJJ

效果图：