黑马程序员技术交流社区

标题: 表格高亮显示鼠标移出还是高亮 [打印本页]
作者: 沫然    时间: 2014-3-27 22:12
标题: 表格高亮显示鼠标移出还是高亮
本帖最后由 沫然 于 2014-3-31 12:11 编辑
  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=utf-8" />
  5. <title>无标题文档</title>
  6. <link rel="stylesheet" href="tab.css" />
  7. <!--
  8. @charset "utf-8";
  9. /* CSS Document */

  11. table{
  12.         border:#900 1px solid;
  13.         width:60%;
  14.         }
  15.         
  16. table th{
  17.         border:#900 1px solid;
  18.         background-color:#093;
  19.         }
  20. table td{
  21.         border:#000 1px solid;
  22.         }
  23. -->
  24. <style type="text/css">
  25. .one{
  26.         background-color:#F00;
  27.         }
  28. .two{
  29.         background-color:#FF0;
  30.         }
  31. .over{
  32.         background-color:#0FF;
  33.         }
  34. </style>
  35. <script type="text/javascript" src="doctool.js"></script>
  36. <!--
  37. // JavaScript Document

  39. var doc = document;

  41. function byId(id)
  42. {
  43.         return doc.getElementById(id);
  44. }
  45. function byTag(name)
  46. {
  47.         return doc.getElementsByTagName(name);
  48. }
  49. function byName(name)
  50. {
  51.         return doc.getElementsByName(name);
  52. }
  53. -->
  54. <script type="text/javascript">
  55. //行颜色间隔显示
  56. function trcolor()
  57. {
  58.         var tabNode = byTag("table")[0];
  59.         var trs = tabNode.rows;
  60.         for(var x=1; x<trs.length; x++)
  61.         {
  62.                 if(x%2==1)
  63.                         trs[x].className = "one";
  64.                 else
  65.                         trs[x].className = "two";
  66.                
  67.                 //表格高亮显示鼠标移出不恢复？
  68.                 trs[x].onmouseover = function()
  69.                 {
  70.                         name = this.className;
  71.                         this.className = "over";
  72.                 };
  73.                
  74.                 trs[x].onmouseout = function()
  75.                 {
  76.                         this.calssName = name;
  77.                 }
  78.         }
  79.         
  80. }
  81. var name;
  82. /*
  83. function over(trNode)
  84. {
  85.         name = trNode.className;
  86.         trNode.className = "over";
  87. }
  88. function out(trNode)
  89. {
  90.         trNode.className = name;
  91. }
  92. */
  93. window.onload = trcolor;

  95. </script>
  96. </head>

  98. <body>

  100. <table>
  101.         <tr>
  102.             <th>姓名</th>
  103.         <th>年龄</th>
  104.         <th>地址</th>
  105.     </tr>
  106.    
  107.     <tr>
  108.             <td>张三</td>
  109.         <td>30</td>
  110.         <td>北京</td>
  111.     </tr>
  112.    
  113.     <tr>
  114.             <td>李四</td>
  115.         <td>4</td>
  116.         <td>上海</td>
  117.     </tr>
  118.    
  119.     <tr>
  120.             <td>王五</td>
  121.         <td>23</td>
  122.         <td>广州</td>
  123.     </tr>
  124.    
  125.     <tr>
  126.             <td>赵六</td>
  127.         <td>27</td>
  128.         <td>南京</td>
  129.     </tr>
  130.    
  131.     <tr>
  132.             <td>周七</td>
  133.         <td>25</td>
  134.         <td>大连</td>
  135.     </tr>
  136.    
  137.     <tr>
  138.             <td>孙八</td>
  139.         <td>29</td>
  140.         <td>铁岭</td>
  141.     </tr>
  142. </table>

  144. </body>
  145. </html>
复制代码


表格高亮显示 用静态的鼠标移出就可以恢复原色 而用动态的就不能恢复？
用动态的就是这个效果：



作者: ノtrack    时间: 2014-3-31 11:42
你还是在看视频吧..  我学习去了...   
作者: 沫然    时间: 2014-3-31 12:11
终于弄明白了  
作者: 松毛    时间: 2014-3-31 13:17
下面的代码可以参考一下！
  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=utf-8" />
  5. <title>Table Color</title>
  6. <style type="text/css">
  7. table{
  8.         border:#0FC 2px solid;
  9.         border-collapse:collapse;
  10.         width:80%;
  11. }
  12. table th,table td{
  13.         border:#0FF 2px solid;
  14.         padding:10px 0px 10px 10px;
  15.         text-align:center;
  16. }
  17. table th{
  18.         background:#9C0;
  19. }

  21. .single{
  22.         background:#3FF;
  23. }
  24. .double{
  25.         background:#FF3;
  26. }
  27. .over{
  28.         background:#060;
  29. }

  31. #click{
  32.         background:#903;
  33. }
  34. </style>

  36. <script type="text/javascript">
  37. var name;
  38. function trColor()
  39. {
  40.         var tabNode = document.getElementsByTagName("table")[0];
  41.         var trNode = tabNode.rows;
  42.         //alert(trNode.length);
  43.         for(var x=1; x<trNode.length; x++)
  44.         {
  45.                 if(x%2 == 0)
  46.                         trNode[x].className = "double";
  47.                 else
  48.                         trNode[x].className = "single";
  49.                
  50.                 trNode[x].onmouseover = function()
  51.                 {
  52.                         name = this.className;
  53.                         this.className = "over";
  54.                 }
  55.                 trNode[x].onmouseout = function()
  56.                 {
  57.                         this.className = name;
  58.                 }
  59.                
  60.                 trNode[x].onclick = function()
  61.                 {
  62.                         var temp = this.getAttribute("id");
  63.                         if(temp == "click")
  64.                         {
  65.                                 this.removeAttribute("id");
  66.                         }
  67.                         else
  68.                         {
  69.                                 this.setAttribute("id","click");
  70.                         }
  71.                 }
  72.         }
  73. }
  74. onload = function()
  75. {
  76.         trColor();
  77. }
  78. </script>
  79. </head>

  81. <body>
  82. <table>
  83.         <tr>
  84.             <th>电影名称</th>
  85.         <th>电影主演</th>
  86.         <th>电影评论</th>
  87.     </tr>
  88.    
  89.     <tr>
  90.             <td>大闹天宫</td>
  91.         <td>周润发、郭富城....</td>
  92.         <td>该电影是一部很不错的3D电影</td>
  93.     </tr>
  94.    
  95.     <tr>
  96.             <td>大闹天宫</td>
  97.         <td>周润发、郭富城....</td>
  98.         <td>该电影是一部很不错的3D电影</td>
  99.     </tr>
  100.    
  101.     <tr>
  102.             <td>大闹天宫</td>
  103.         <td>周润发、郭富城....</td>
  104.         <td>该电影是一部很不错的3D电影</td>
  105.     </tr>
  106.    
  107.     <tr>
  108.             <td>大闹天宫</td>
  109.         <td>周润发、郭富城....</td>
  110.         <td>该电影是一部很不错的3D电影</td>
  111.     </tr>
  112.    
  113.     <tr>
  114.             <td>大闹天宫</td>
  115.         <td>周润发、郭富城....</td>
  116.         <td>该电影是一部很不错的3D电影</td>
  117.     </tr>
  118.    
  119.     <tr>
  120.             <td>大闹天宫</td>
  121.         <td>周润发、郭富城....</td>
  122.         <td>该电影是一部很不错的3D电影</td>
  123.     </tr>
  124.    
  125.     <tr>
  126.             <td>大闹天宫</td>
  127.         <td>周润发、郭富城....</td>
  128.         <td>该电影是一部很不错的3D电影</td>
  129.     </tr>
  130.    
  131.     <tr>
  132.             <td>大闹天宫</td>
  133.         <td>周润发、郭富城....</td>
  134.         <td>该电影是一部很不错的3D电影</td>
  135.     </tr>
  136. </table>
  137. </body>
  138. </html>
复制代码







欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2