js处理表格

1、行颜色间隔显示

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>

2、鼠标移动到某一行，改行颜色加亮，移开后恢复原来颜色

复制代码 代码如下:

<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>