A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 任江峰 中级黑马   /  2013-6-7 15:25  /  1132 人查看  /  3 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. table, table td, table th{
  8.         border:#0033CC 1px solid;
  9. }
  10. table{
  11.         width:60%;
  12. }
  13. table th{
  14.         background-color:#FFFF00;
  15. }
  16. .one{
  17.         background-color:#99FF00;
  18. }
  19. .two{
  20.         background-color:#FFFFCC;
  21. }
  22. .over{
  23.         background-color:#FF6633;
  24. }
  25. </style>
  26. <script type="text/javascript">
  27. function sortTab()
  28. {
  29.         var tabNode = document.getElementsByTagName("table")[0];
  30.         var trs = tabNode.rows;
  31.         for(var i=0; i<trs.length; i++)
  32.         {
  33.                 if(i%2 == 1)
  34.                 {
  35.                         trs[i].className="one";
  36.                 }
  37.                 else
  38.                 {
  39.                         trs[i].className="two";
  40.                 }
  41.                 /*用这里的代码可以完成鼠标移动突出显示效果
  42.                 trs[i].onmouseover=function()
  43.                 {
  44.                         this.className = "over";
  45.                 }
  46.                 */
  47.                 trs[i].onmouseover = mouseOver(this);//用这句代码为什么没有效果?不用匿名应该怎么做呢?
  48.         }
  49. }
  50. function mouseOver(trNode)
  51. {
  52.         trNode.className = "over";
  53. }
  54. window.onload = function()
  55. {
  56.         sortTab();
  57. }
  58. </script>
  59. </head>

  60. <body>
  61. <table>
  62.         <tr>
  63.                 <th>姓名</th>
  64.                 <th><a href="javascript:void(0)" onclick="sortTab()">年龄</a></th>
  65.                 <th>地址</th>
  66.         </tr>
  67.         <tr>
  68.                 <td>张三</td>
  69.                 <td>27</td>
  70.                 <td>北京</td>
  71.         </tr>
  72.         <tr>
  73.                 <td>李四</td>
  74.                 <td>26</td>
  75.                 <td>长沙</td>
  76.         </tr>
  77.         <tr>
  78.                 <td>王五</td>
  79.                 <td>32</td>
  80.                 <td>加州</td>
  81.         </tr>
  82.         <tr>
  83.                 <td>赵六</td>
  84.                 <td>28</td>
  85.                 <td>首尔</td>
  86.         </tr>
  87.         <tr>
  88.                 <td>孙七</td>
  89.                 <td>8</td>
  90.                 <td>天津</td>
  91.         </tr>
  92. </table>
  93. </body>
  94. </html>
复制代码

评分

参与人数 1技术分 +1 收起 理由
曹睿翔 + 1 神马都是浮云

查看全部评分

3 个回复

倒序浏览
不会  等待大神回答
回复 使用道具 举报
如果大家没有加分的  把链接给我  给我留言
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马