Discuz教程网

1314学习网»站长论坛 › 站长交流区 › 技术杂谈 › Table隔行变色的JavaScript代码
返回列表 发新帖

Table隔行变色的JavaScript代码

[复制链接]
authicon 09927306 发表于 2011-1-18 13:51:13 | 显示全部楼层 |阅读模式
用js实现的table隔行变色，鼠标放上去有变色显示，需要的朋友可以参考下。
核心代码:
代码如下:


  2. <table id="datatable">
  3. <tr>
  4. <td>1314学习网</td>
  5. </tr>
  6. <tr>
  7. <td>www.discuz.1314study.com</td>
  8. </tr>
  9. <tr>
  10. <td>1314学习网</td>
  11. </tr>
  12. <tr>
  13. <td>www.discuz.1314study.com</td>
  14. </tr>
  15. <tr>
  16. <td>1314学习网</td>
  17. </tr>
  18. <tr>
  19. <td>www.discuz.1314study.com</td>
  20. </tr>
  21. <tr>
  22. <td>1314学习网</td>
  23. </tr>
  24. <tr>
  25. <td>www.discuz.1314study.com</td>
  26. </tr>
  27. </table>
  28. <script>
  29. function showtable(){
  30. var color1 = "rgb(234,240,255)";
  31. var color2 = "rgb(255,255,255)";
  32. var bgColor = "rgb(255,255,193)";
  33. var trs = document.getElementById("datatable").getElementsByTagName("tr");
  34. for (var i=0;i<trs.length-1;i++){
  35. if (i%2==0) {
  36. trs[i].style.backgroundColor=color1;
  37. trs[i].onmouseover = function(){
  38. this.style.backgroundColor = bgColor;
  39. }
  40. trs[i].onmouseout = function(){
  41. this.style.backgroundColor = color1;
  42. }
  43. } else {
  44. trs[i].style.backgroundColor=color2;
  45. trs[i].onmouseover = function(){
  46. this.style.backgroundColor = bgColor;
  47. }
  48. trs[i].onmouseout = function(){
  49. this.style.backgroundColor = color2;
  50. }
  51. }
  52. }
  53. }
  54. showtable()
  55. </script>
复制代码



seo



上一篇：javascript 内存回收机制理解
下一篇：JavaScript版本迷局介绍

相关帖子
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1314学习网 ( 浙ICP备10214163号 )

GMT+8, 2025-5-2 18:23

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表