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>