zoukankan      html  css  js  c++  java
  • table 控制单双行颜色以及鼠标hover颜色 table光棒

      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>table 控制单双行颜色以及鼠标hover颜色</title>
      6     <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
      7     <style type="text/css">
      8         a
      9         {
     10             font-size: 16px;
     11             line-height: 20px;
     12         }
     13         a:link
     14         {
     15             color: Black; /*未访问:黑色、无下划线 -*/
     16             text-decoration: none;
     17         }
     18         a:active:
     19         {
     20             color: Orange; /*激活:红色 -*/
     21         }
     22         a:visited
     23         {
     24             color: Black;
     25             text-decoration: none; /*已访问:Black、无下划线 -*/
     26         }
     27         a:hover
     28         {
     29             color: Orange;
     30             text-decoration: underline; /*鼠标移近:红色、下划线 -*/
     31         }
     32         p
     33         {
     34             width: 700px;
     35             margin: 10px 0 0 0;
     36             padding: 10px;
     37             border: 0;
     38             border: 1px dotted Orange;
     39             background: #f5f5f5;
     40             min-height: 25px;
     41         }
     42         table.tableList
     43         {
     44             border-collapse: collapse;
     45             border: solid 1px Orange;
     46             width: 100%;
     47             text-align: center;
     48         }
     49         table.tableList th
     50         {
     51             padding: 1px 6px;
     52             line-height: 21px;
     53             font-weight: bolder;
     54         }
     55         table.tableList td
     56         {
     57             padding: 1px 6px;
     58             line-height: 21px;
     59         }
     60         table.tableList .hot
     61         {
     62             background-color: #FFFACD;
     63         }
     64         table.tableList .toleft
     65         {
     66             text-align: left;
     67         }
     68         table.tableList .toright
     69         {
     70             text-align: right;
     71         }
     72         table.tableList .tomiddle
     73         {
     74             text-align: center;
     75         }
     76     </style>
     77     <script language="javascript" type="text/javascript">
     78         window.onload = function () {
     79             changeTableStyle();
     80         }
     81         function changeTableStyle() {   //修改数据列表样式
     82             var oldcolor;
     83             $(".tableList td").css({ 'border-left': '#C9CACA 1px solid', color: '#000' });
     84             $(".tableList tr:even").css('background-color', '#E2E7EA');
     85             $(".tableList tr").hover(
     86                 function () {
     87                     if ($(this).attr("class") != "trhead") {
     88                         oldcolor = $(this).css('background-color'); $(this).css('background-color', '#BADDE9')
     89                     }
     90                 },
     91                 function () {
     92                     if ($(this).attr("class") != "trhead") {
     93                         $(this).css('background-color', oldcolor)
     94                     }
     95                 }
     96               );
     97             $(".trhead").css({ background: "Orange" });
     98         }
     99     </script>
    100 </head>
    101 <body>
    102     <p>
    103         table 控制单双行颜色以及鼠标hover颜色<br />
    104         hot :tr背景变色
    105         <br />
    106         tomiddle:td内文字居中
    107         <br />
    108         toright:td内文字居右<br />
    109         toLeft :td内文字居左<br />
    110     </p>
    111     <br />
    112     <table class="tableList">
    113         <tr class="trhead">
    114             <th>
    115                 来源
    116             </th>
    117             <th>
    118                 标题
    119             </th>
    120             <th>
    121                 标题
    122             </th>
    123             <th>
    124                 标题
    125             </th>
    126             <th>
    127                 标题
    128             </th>
    129             <th>
    130                 标题
    131             </th>
    132         </tr>
    133         <tr>
    134             <td>
    135                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
    136             </td>
    137             <td>
    138                 测试文字
    139             </td>
    140             <td>
    141                 测试文字
    142             </td>
    143             <td>
    144                 测试文字
    145             </td>
    146             <td>
    147                 测试文字
    148             </td>
    149             <td>
    150                 测试文字
    151             </td>
    152         </tr>
    153         <tr>
    154             <td>
    155                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
    156             </td>
    157             <td>
    158                 测试文字
    159             </td>
    160             <td>
    161                 测试文字
    162             </td>
    163             <td>
    164                 测试文字
    165             </td>
    166             <td>
    167                 测试文字
    168             </td>
    169             <td>
    170                 测试文字
    171             </td>
    172         </tr>
    173         <tr class="hot">
    174             <td>
    175                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
    176             </td>
    177             <td class="tomiddle">
    178                 测试文字
    179             </td>
    180             <td class="toright">
    181                 测试文字
    182             </td>
    183             <td class="toleft">
    184                 测试文字
    185             </td>
    186             <td>
    187                 测试文字
    188             </td>
    189             <td>
    190                 测试文字
    191             </td>
    192         </tr>
    193         <tr>
    194             <td>
    195                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
    196             </td>
    197             <td>
    198                 测试文字
    199             </td>
    200             <td>
    201                 测试文字
    202             </td>
    203             <td>
    204                 测试文字
    205             </td>
    206             <td>
    207                 测试文字
    208             </td>
    209             <td>
    210                 测试文字
    211             </td>
    212         </tr>
    213         <tr>
    214             <td>
    215                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
    216             </td>
    217             <td>
    218                 测试文字
    219             </td>
    220             <td>
    221                 测试文字
    222             </td>
    223             <td>
    224                 测试文字
    225             </td>
    226             <td>
    227                 测试文字
    228             </td>
    229             <td>
    230                 测试文字
    231             </td>
    232         </tr>
    233         <tr>
    234             <td>
    235                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
    236             </td>
    237             <td>
    238                 测试文字
    239             </td>
    240             <td>
    241                 测试文字
    242             </td>
    243             <td>
    244                 测试文字
    245             </td>
    246             <td>
    247                 测试文字
    248             </td>
    249             <td>
    250                 测试文字
    251             </td>
    252         </tr>
    253         <tr>
    254             <td>
    255                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
    256             </td>
    257             <td>
    258                 测试文字
    259             </td>
    260             <td>
    261                 测试文字
    262             </td>
    263             <td>
    264                 测试文字
    265             </td>
    266             <td>
    267                 测试文字
    268             </td>
    269             <td>
    270                 测试文字
    271             </td>
    272         </tr>
    273         <tr>
    274             <td>
    275                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
    276             </td>
    277             <td>
    278                 测试文字
    279             </td>
    280             <td>
    281                 测试文字
    282             </td>
    283             <td>
    284                 测试文字
    285             </td>
    286             <td>
    287                 测试文字
    288             </td>
    289             <td>
    290                 测试文字
    291             </td>
    292         </tr>
    293         <tr>
    294             <td>
    295                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
    296             </td>
    297             <td>
    298                 测试文字
    299             </td>
    300             <td>
    301                 测试文字
    302             </td>
    303             <td>
    304                 测试文字
    305             </td>
    306             <td>
    307                 测试文字
    308             </td>
    309             <td>
    310                 测试文字
    311             </td>
    312         </tr>
    313     </table>
    314 </body>
    315 </html>

    效果图:

    附件下载:http://files.cnblogs.com/Orange-C/TableDemo.zip 出处 http://www.cnblogs.com/Orange-C/p/4049832.html                       

  • 相关阅读:
    oracle数据库物理结构逻辑结构内存区块进程管理
    系统的数据库设计
    大数据和高并发的解决方案总结
    Asp.net+WebSocket+Emgucv实时人脸识别
    初识Docker
    变位词程序的实现
    分布式系统常见问题#转载
    六类排序算法的C#实现
    Asp.net MVC 中Controller返回值类型ActionResult
    将应用程序中的一些参数写到xml配置文件中
  • 原文地址:https://www.cnblogs.com/Orange-C/p/4049832.html
Copyright © 2011-2022 走看看