js处理表格对table进行修饰
1、行颜色间隔显示
css样式:两个选择器
<styletype="text/css">
.one{
background-color:#33ffcc;
}
.two{
backgound-color:#ffff66;
}
</style>
<scripttype="text/javascript">
functiontrcolor()
//控制间隔行颜色显示不同
{
vartabNode=document.getElementsByTagName("table")[0];
//获取table节点
vartrs=tabNode.rows;
//获取table中的所有的行
for(varx=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>
2、鼠标移动到某一行,改行颜色加亮,移开后恢复原来颜色
<styletype="text/css">
.over{
background-color:##00ff00;
}
<style>
<scripttype="text/javascript">
varname;
functiontrMouse()
{
vartabNode=document.getELementsByTagName("table")[0];
//通过for循环,对每个tr标签加上onmouseover与onmouseout属性
for(varx=0;x<trs[x].length;x++)
{
trs[x].onmouseover=function()
{
name=this.className;
this.className="over";
}
tes[x].onmouseout=function()
{
this.className=name;
}
}
}
</script>