JavaScript/DOM/XML & 技术 26 Jan 2007 05:04 pm

一个table ui

下午参照lukew的ui做了个table
http://www.lukew.com/portfolio/web_applications/img/welligent_page.gif

本来想实现类似phpmyadmin的显示样式，可以当前行高亮并可以做标记，不过没找到很好的实现方法。
hover目前支持ie7和firefox

点击查看table ui

  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. <title> table ui </title>
  5. <meta name="generator" content="editplus" />
  6. <meta name="author" content="andy chu" />
  7. <meta name="keywords" content="" />
  8. <meta name="description" content="" />
  9. <style type="text/css">
  10. body {
  11. margin:0;
  12. padding:0;
  13. FONT: 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  14. color:#666;
  15. }
  16. a:link {
  17. color:#33CCFF;
  18. }
  19. a:visited {
  20. color:#3399FF;
  21. }
  22. a:hover {
  23. color:#FF33FF;
  24. }
  25. a:active {
  26. color:#FF33FF;
  27. }
  28. .DataSheet {
  29. table-layout:fixed; /*auto | fixed*/
  30. overflow:hidden; /*firefox*/
  31. padding:0;
  32. margin:0;
  33. border-collapse :collapse;/* separate | collapse*/
  34. width:700px;
  35. }
  36. .DataSheet caption {
  37. border-top:1px solid #c1dad7;
  38. border-left:1px solid #c1dad7;
  39. border-right:1px solid #c1dad7;
  40. padding:6px;
  41. padding-left:12px;
  42. background:#5265B5;
  43. text-align:left;
  44. color:#DEEBFF;
  45. font-weight:bold;
  46. }
  47. .DataSheet th {
  48. border:1px solid #c1dad7;
  49. padding:6px;
  50. padding-left:6px;
  51. background:#FFF7DE;
  52. color:#393410;
  53. text-align:left;
  54. }
  55. .DataSheet tr {
  56. background:#FFF;
  57. }
  58. .DataSheet td {
  59. border:1px solid #c1dad7;
  60. padding:6px;
  61. }
  62. .DataSheet tr.Odd {
  63. background:#FFFFFF;
  64. }
  65. .DataSheet tr.Event {
  66. background:#F7FBFF;
  67. }
  68. .DataSheet tr.OddMarked {
  69. background:#CEEBEF;
  70. }
  71. .DataSheet tr.EventMarked {
  72. background:#CEEBEF;
  73. }
  74. table.DataSheet tr:hover {
  75. background:#F7FBFF;
  76. }
  77. </style>
  78.  
  79. <script type="text/javascript">
  80. function markRow(elm){
  81.     var className = elm.className;
  82.     if ((/Marked/).test(elm.className))
  83.     {
  84.         elm.className = className.replace(/Marked/,'');
  85.     }else{
  86.         elm.className = className+'Marked';
  87.     }
  88. }
  89. </script>
  90. </head>
  91.  
  92. <body>
  93. <br />
  94. <table class="DataSheet" >
  95. <caption>List</caption>
  96. <col width="10%" /><col width="50%" /><col width="20%" /><col width="20%" />
  97. <tr><th>ID</th><th>Name</th><th>Date</th><th>Operation</th></tr>
  98. <tr class="Odd" onclick="markRow(this);"><td>1</td><td>afffffsafdasdfasdasdgasdgasdg</td><td>2007-1-26</td><td>saffff</td></tr>
  99. <tr class="Event" onclick="markRow(this);"><td>2</td><td></td><td>2007-1-26</td><td><a href="#">link</a></td></tr>
  100. <tr class="Odd" onclick="markRow(this);"><td>3</td><td>c</td><td>2007-1-26</td><td>wqr</td></tr>
  101. <tr class="Event" onclick="markRow(this);"><td>4</td><td>d</td><td>2007-1-26</td><td>wqr</td></tr>
  102. </table>
  103. </body>
  104. </html>

Trackback This Post | Subscribe to the comments through RSS Feed

Leave a Reply