设为首页收藏本站

职业IT人-IT人生活圈

 找回密码
 成为会员
搜索
职业IT人-IT人生活圈»IT生活 › 软件工程师 › WEB前端 › css表格鼠标滑动
返回列表 发新帖
查看: 860|回复: 6

css表格鼠标滑动

  [复制链接]
北大青鸟 发表于 2011-6-12 10:22 | 显示全部楼层 |阅读模式
分享之...


---------------------
HTML:
  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>   
  7. .datalist{   
  8. border:1px solid #0058a3;   
  9. font-family:Arial;   
  10. border-collapse:collapse;   
  11. background-color:#eaf5ff;   
  12. font-size: 14px;   
  13. }   
  14.   
  15. .datalist th{   
  16. border:1px solid #0058a3;   
  17. background-color:#4bacff;   
  18. color:#FFFFFF;   
  19. font-weight:bold;   
  20. padding-top:4px;   
  21. padding-bottom:4px;   
  22. padding-left:12px;   
  23. padding-right:12px;   
  24. text-align:center;   
  25. }   
  26.   
  27. .datalist td{   
  28. border:1px solid #0058a3;   
  29. text-align:left;   
  30. padding-top:4px;   
  31. padding-bottom:4px;   
  32. padding-left:10px;   
  33. padding-right:10px;   
  34. }   
  35.   
  36. .datalist tr:hover, .datalist tr.altrow{   
  37. background-color:#c4e4ff;   
  38. }   
  39. </style>   
  40. </head>   
  41.   
  42. <body>   
  43. <table class="datalist" summary="list of members in EE Studay">   
  44. <tr>   
  45. <th>Name</th>   
  46. <th>Class</th>   
  47. <th>Birthday</th>   
  48. <th>Address</th>   
  49. <th>Mobile</th>   
  50. </tr>   
  51. <tr>   
  52.     <td>isaac</td>   
  53.     <td>W13</td>   
  54.     <td>Jun 24h</td>   
  55.     <td>Cancer</td>   
  56.     <td>1118159</td>   
  57. </tr>   
  58.   
  59. <tr>   
  60.     <td>isaac</td>   
  61.     <td>W13</td>   
  62.     <td>Jun 24h</td>   
  63.     <td>Cancer</td>   
  64.     <td>1118159</td>   
  65. </tr>   
  66.   
  67. <tr>   
  68.     <td>isaac</td>   
  69.     <td>W13</td>   
  70.     <td>Jun 24h</td>   
  71.     <td>Cancer</td>   
  72.     <td>1118159</td>   
  73. </tr>   
  74.   
  75. <tr>   
  76.     <td>isaac</td>   
  77.     <td>W13</td>   
  78.     <td>Jun 24h</td>   
  79.     <td>Cancer</td>   
  80.     <td>1118159</td>   
  81. </tr>   
  82.   
  83. <tr>   
  84.     <td>isaac</td>   
  85.     <td>W13</td>   
  86.     <td>Jun 24h</td>   
  87.     <td>Cancer</td>   
  88.     <td>1118159</td>   
  89. </tr>   
  90.   
  91. <tr>   
  92.     <td>isaac</td>   
  93.     <td>W13</td>   
  94.     <td>Jun 24h</td>   
  95.     <td>Cancer</td>   
  96.     <td>1118159</td>   
  97. </tr>   
  98.   
  99. <tr>   
  100.     <td>isaac</td>   
  101.     <td>W13</td>   
  102.     <td>Jun 24h</td>   
  103.     <td>Cancer</td>   
  104.     <td>1118159</td>   
  105. </tr>   
  106.   
  107. <tr>   
  108.     <td>isaac</td>   
  109.     <td>W13</td>   
  110.     <td>Jun 24h</td>   
  111.     <td>Cancer</td>   
  112.     <td>1118159</td>   
  113. </tr>   
  114.   
  115. <tr>   
  116.     <td>isaac</td>   
  117.     <td>W13</td>   
  118.     <td>Jun 24h</td>   
  119.     <td>Cancer</td>   
  120.     <td>1118159</td>   
  121. </tr>   
  122.   
  123. <tr>   
  124.     <td>isaac</td>   
  125.     <td>W13</td>   
  126.     <td>Jun 24h</td>   
  127.     <td>Cancer</td>   
  128.     <td>1118159</td>   
  129. </tr>   
  130.   
  131. <tr>   
  132.     <td>isaac</td>   
  133.     <td>W13</td>   
  134.     <td>Jun 24h</td>   
  135.     <td>Cancer</td>   
  136.     <td>1118159</td>   
  137. </tr>   
  138.   
  139. <tr>   
  140.     <td>isaac</td>   
  141.     <td>W13</td>   
  142.     <td>Jun 24h</td>   
  143.     <td>Cancer</td>   
  144.     <td>1118159</td>   
  145. </tr>   
  146.   
  147. <tr>   
  148.     <td>isaac</td>   
  149.     <td>W13</td>   
  150.     <td>Jun 24h</td>   
  151.     <td>Cancer</td>   
  152.     <td>1118159</td>   
  153. </tr>   
  154.   
  155. <tr>   
  156.     <td>isaac</td>   
  157.     <td>W13</td>   
  158.     <td>Jun 24h</td>   
  159.     <td>Cancer</td>   
  160.     <td>1118159</td>   
  161. </tr>   
  162.   
  163. <tr>   
  164.     <td>isaac</td>   
  165.     <td>W13</td>   
  166.     <td>Jun 24h</td>   
  167.     <td>Cancer</td>   
  168.     <td>1118159</td>   
  169. </tr>   
  170. </table>   
  171. <script type="text/javascript">   
  172.     var rows = document.getElementsByTagName("tr");   
  173.     for(var i=0; i<rows.length; i++){   
  174.         rows[i].onmouseover = function(){   
  175.             this.className += 'altrow';   
  176.         }   
  177.         rows[i].onmouseout = function(){   
  178.             this.className = this.className.replace('altrow');   
  179.         }   
  180.     }   
  181. </script>   
  182. </body>   
  183. </html>  
复制代码
  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>
  7. .datalist{
  8. border:1px solid #0058a3;
  9. font-family:Arial;
  10. border-collapse:collapse;
  11. background-color:#eaf5ff;
  12. font-size: 14px;
  13. }

  15. .datalist th{
  16. border:1px solid #0058a3;
  17. background-color:#4bacff;
  18. color:#FFFFFF;
  19. font-weight:bold;
  20. padding-top:4px;
  21. padding-bottom:4px;
  22. padding-left:12px;
  23. padding-right:12px;
  24. text-align:center;
  25. }

  27. .datalist td{
  28. border:1px solid #0058a3;
  29. text-align:left;
  30. padding-top:4px;
  31. padding-bottom:4px;
  32. padding-left:10px;
  33. padding-right:10px;
  34. }

  36. .datalist tr:hover, .datalist tr.altrow{
  37. background-color:#c4e4ff;
  38. }
  39. </style>
  40. </head>

  42. <body>
  43. <table class="datalist" summary="list of members in EE Studay">
  44. <tr>
  45. <th>Name</th>
  46. <th>Class</th>
  47. <th>Birthday</th>
  48. <th>Address</th>
  49. <th>Mobile</th>
  50. </tr>
  51. <tr>
  52.         <td>isaac</td>
  53.         <td>W13</td>
  54.         <td>Jun 24h</td>
  55.         <td>Cancer</td>
  56.         <td>1118159</td>
  57. </tr>

  59. <tr>
  60.         <td>isaac</td>
  61.         <td>W13</td>
  62.         <td>Jun 24h</td>
  63.         <td>Cancer</td>
  64.         <td>1118159</td>
  65. </tr>

  67. <tr>
  68.         <td>isaac</td>
  69.         <td>W13</td>
  70.         <td>Jun 24h</td>
  71.         <td>Cancer</td>
  72.         <td>1118159</td>
  73. </tr>

  75. <tr>
  76.         <td>isaac</td>
  77.         <td>W13</td>
  78.         <td>Jun 24h</td>
  79.         <td>Cancer</td>
  80.         <td>1118159</td>
  81. </tr>

  83. <tr>
  84.         <td>isaac</td>
  85.         <td>W13</td>
  86.         <td>Jun 24h</td>
  87.         <td>Cancer</td>
  88.         <td>1118159</td>
  89. </tr>

  91. <tr>
  92.         <td>isaac</td>
  93.         <td>W13</td>
  94.         <td>Jun 24h</td>
  95.         <td>Cancer</td>
  96.         <td>1118159</td>
  97. </tr>

  99. <tr>
  100.         <td>isaac</td>
  101.         <td>W13</td>
  102.         <td>Jun 24h</td>
  103.         <td>Cancer</td>
  104.         <td>1118159</td>
  105. </tr>

  107. <tr>
  108.         <td>isaac</td>
  109.         <td>W13</td>
  110.         <td>Jun 24h</td>
  111.         <td>Cancer</td>
  112.         <td>1118159</td>
  113. </tr>

  115. <tr>
  116.         <td>isaac</td>
  117.         <td>W13</td>
  118.         <td>Jun 24h</td>
  119.         <td>Cancer</td>
  120.         <td>1118159</td>
  121. </tr>

  123. <tr>
  124.         <td>isaac</td>
  125.         <td>W13</td>
  126.         <td>Jun 24h</td>
  127.         <td>Cancer</td>
  128.         <td>1118159</td>
  129. </tr>

  131. <tr>
  132.         <td>isaac</td>
  133.         <td>W13</td>
  134.         <td>Jun 24h</td>
  135.         <td>Cancer</td>
  136.         <td>1118159</td>
  137. </tr>

  139. <tr>
  140.         <td>isaac</td>
  141.         <td>W13</td>
  142.         <td>Jun 24h</td>
  143.         <td>Cancer</td>
  144.         <td>1118159</td>
  145. </tr>

  147. <tr>
  148.         <td>isaac</td>
  149.         <td>W13</td>
  150.         <td>Jun 24h</td>
  151.         <td>Cancer</td>
  152.         <td>1118159</td>
  153. </tr>

  155. <tr>
  156.         <td>isaac</td>
  157.         <td>W13</td>
  158.         <td>Jun 24h</td>
  159.         <td>Cancer</td>
  160.         <td>1118159</td>
  161. </tr>

  163. <tr>
  164.         <td>isaac</td>
  165.         <td>W13</td>
  166.         <td>Jun 24h</td>
  167.         <td>Cancer</td>
  168.         <td>1118159</td>
  169. </tr>
  170. </table>
  171. <script type="text/javascript">
  172.         var rows = document.getElementsByTagName("tr");
  173.         for(var i=0; i<rows.length; i++){
  174.                 rows[i].onmouseover = function(){
  175.                         this.className += 'altrow';
  176.                 }
  177.                 rows[i].onmouseout = function(){
  178.                         this.className = this.className.replace('altrow');
  179.                 }
  180.         }
  181. </script>
  182. </body>
  183. </html>
复制代码
CSS, 表格

相关帖子
回复

使用道具 举报

 楼主| 北大青鸟 发表于 2011-6-12 10:22 | 显示全部楼层
好，不错的说。


回复 支持 反对

使用道具 举报

hxy 发表于 2011-8-1 10:40 | 显示全部楼层
我帮不了你
回复 支持 反对

使用道具 举报

broken 发表于 2011-8-12 10:08 | 显示全部楼层
哈哈 我支持你
回复 支持 反对

使用道具 举报

hxy 发表于 2011-8-16 10:02 | 显示全部楼层
呵呵 都没人想我~~
回复 支持 反对

使用道具 举报

 楼主| 北大青鸟 发表于 2011-8-16 10:02 | 显示全部楼层
怎么这么跟别人不一样类~
回复 支持 反对

使用道具 举报

月上萧萧 发表于 2011-8-17 12:22 | 显示全部楼层
注:偶是女滴,千真万确,毋庸置疑!
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 成为会员

本版积分规则

QQ|手机版|小黑屋|网站帮助|职业IT人-IT人生活圈 ( 粤ICP备12053935号-1 )|网站地图
本站文章版权归原发布者及原出处所有。内容为作者个人观点，并不代表本站赞同其观点和对其真实性负责，本站只提供参考并不构成任何投资及应用建议。本站是信息平台，网站上部分文章为转载，并不用于任何商业目的，我们已经尽可能的对作者和来源进行了通告，但是能力有限或疏忽造成漏登，请及时联系我们，我们将根据著作权人的要求立即更正或者删除有关内容。

GMT+8, 2024-4-17 05:31 , Processed in 0.157379 second(s), 24 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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