JavaScript实现表格隔行变色与鼠标悬停高亮效果

使用JavaScript对HTML表格进行样式修饰

实现表格隔行变色效果

第一种效果：实现表格行的颜色间隔显示

需要准备两个CSS类选择器来定义不同的背景色

 
<style type="text/css">
.one{
background-color:#33ffcc;
} 
.two{
backgound-color:#ffff66;
} 
</style>
<script type="text/javascript">
function trcolor()
// 控制间隔行的颜色显示不同
{ 
var tabNode = document.getElementsByTagName("table")[0];
// 获取table节点
var trs = tabNode.rows;
// 获取table中的所有的行
for(var x=1; x<trs.length;x++)
{ 
if(x%2 == 1)
trs[x].className ="one";
else
trs[x].className ="two";
} 
} 
// 通过onload方法，在网页加载完成后，运行trcolor方法，实现表格的间隔行颜色。
window.onload = function()
{ 
trcolor();
} 
</script>

实现鼠标悬停高亮效果

第二种效果：鼠标移动到某一行时，该行颜色加亮，移开后恢复原来颜色

 
<style type="text/css">
.over{
background-color:##00ff00;
} 
<style>
<script type="text/javascript">
var name;
function trMouse()
{ 
var tabNode = document.getELementsByTagName("table")[0];
// 通过for循环，对每个tr标签加上onmouseover与onmouseout属性
for(var x=0;x<trs[x].length;x++)
{ 
trs[x].onmouseover = function()
{ 
name=this.className;
this.className="over";
} 
tes[x].onmouseout = function()
{ 
this.className = name;
} 
} 
} 
</script>