Posted in Javascript onMay 26, 2014
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>
js处理表格对table进行修饰
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@