<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

     <title>table 控制单双行颜色以及鼠标hover颜色</title>

     <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>

     <style type="text/css">

         a

         {

             font-size: 16px;

             line-height: 20px;

         }

         a:link

         {

             color: Black; /*未访问：黑色、无下划线 -*/

             text-decoration: none;

         }

         a:active:

         {

             color: Orange; /*激活：红色 -*/

         }

         a:visited

         {

             color: Black;

             text-decoration: none; /*已访问：Black、无下划线 -*/

         }

         a:hover

         {

             color: Orange;

             text-decoration: underline; /*鼠标移近：红色、下划线 -*/

         }

         p

         {

             width: 700px;

             margin: 10px 0 0 0;

             padding: 10px;

             border: 0;

             border: 1px dotted Orange;

             background: #f5f5f5;

             min-height: 25px;

         }

         table.tableList

         {

             border-collapse: collapse;

             border: solid 1px Orange;

             width: 100%;

             text-align: center;

         }

         table.tableList th

         {

             padding: 1px 6px;

             line-height: 21px;

             font-weight: bolder;

         }

         table.tableList td

         {

             padding: 1px 6px;

             line-height: 21px;

         }

         table.tableList .hot

         {

             background-color: #FFFACD;

         }

         table.tableList .toleft

         {

             text-align: left;

         }

         table.tableList .toright

         {

             text-align: right;

         }

         table.tableList .tomiddle

         {

             text-align: center;

         }

     </style>

     <script language="javascript" type="text/javascript">

         window.onload = function () {

             changeTableStyle();

         }

         function changeTableStyle() {   //修改数据列表样式

             var oldcolor;

             $(".tableList td").css({ 'border-left': '#C9CACA 1px solid', color: '#000' });

             $(".tableList tr:even").css('background-color', '#E2E7EA');

             $(".tableList tr").hover(

                 function () {

                     if ($(this).attr("class") != "trhead") {

                         oldcolor = $(this).css('background-color'); $(this).css('background-color', '#BADDE9')

                     }

                 },

                 function () {

                     if ($(this).attr("class") != "trhead") {

                         $(this).css('background-color', oldcolor)

                     }

                 }

               );

             $(".trhead").css({ background: "Orange" });

         }

     </script>

 </head>

 <body>

     <p>

         table 控制单双行颜色以及鼠标hover颜色<br />

         hot :tr背景变色

         <br />

         tomiddle:td内文字居中

         <br />

         toright:td内文字居右<br />

         toLeft :td内文字居左<br />

     </p>

     <br />

     <table class="tableList">

         <tr class="trhead">

             <th>

                 来源

             </th>

             <th>

                 标题

             </th>

             <th>

                 标题

             </th>

             <th>

                 标题

             </th>

             <th>

                 标题

             </th>

             <th>

                 标题

             </th>

         </tr>

         <tr>

             <td>

                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

         </tr>

         <tr>

             <td>

                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

         </tr>

         <tr class="hot">

             <td>

                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>

             </td>

             <td class="tomiddle">

                 测试文字

             </td>

             <td class="toright">

                 测试文字

             </td>

             <td class="toleft">

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

         </tr>

         <tr>

             <td>

                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

         </tr>

         <tr>

             <td>

                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

         </tr>

         <tr>

             <td>

                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

         </tr>

         <tr>

             <td>

                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

         </tr>

         <tr>

             <td>

                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

         </tr>

         <tr>

             <td>

                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

             <td>

                 测试文字

             </td>

         </tr>

     </table>

 </body>

 </html>

效果图：

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

table 控制单双行颜色以及鼠标hover颜色 table光棒的更多相关文章

  1. repeater单双行颜色不同，gridview repeater DataList 鼠标经过改变背景颜色

    1.gridview 双击GridView的OnRowDataBound事件: 在后台的GridView1_RowDataBound()方法添加代码,最后代码如下所示: protected void  ...

  2. html table单双行颜色间隔（转载）

    直接上代码: <html> <head> <meta http-equiv="Content-Type" content="text/htm ...

  3. js改变,设置table单双行颜色,jquery改变,设置table单双行颜色

    1.js实现单双行以不同颜色显示 $(document).ready(function () { var color = "#ffeab3"; $("#GvList tr ...

  4. Js实现table单双行交替色

    依稀记得,当初我刚学编程的时候还学过怎么实现表格单双行交替色,现如今早已记不清当时的实现思路,这两天突然想起,没事就自己写了一小段代码,也不知道是否是当年的思路,不过不用纠结这个问题.:) 代码很简单 ...

  5. js控制表格单双行颜色交替显示

    <script language="JavaScript"> window.onload = function() { var Table=document.getEl ...

  6. 奇偶选择器：使用odd和even属性实现表格单双行颜色相间和不同

    一.奇偶选择器 表格在呈现数据的时候我们为了方便观看,而隔行显示不同的颜色,虽然可以用用类选择器 class实现这种效果,但是未免太过麻烦,为了更加简便地表现这种特殊的效果我们需要用到一种特殊的选择器 ...

  7. python - 用户交互/数据类型/格式化输出/运算符/流程控制单双多分支

    python:用户交互: 等用户输入,做反应: username=input("username:")password=input("password:")pr ...

  8. css单双行样式

    #random_box li:nth-child(odd) {//双行 background: #fff5c4; } #random_box li:nth-child(even) {//单行 back ...

  9. PB中datewindow单双行显示不同颜色

    调出datewindow,找到detail中的列,右击properties,左侧Background中的color属性添加 IF(MOD(GETROW(),2)=0,RGB( 255, 250, 20 ...

随机推荐

  1. 使用XStream解析MXL文件用到的jar包---xpp3_min-1.1.3.4.O.jar和xstream-1.3.1.jar

    使用XStream解析MXL文件用到的jar包---xpp3_min-1.1.3.4.O.jar和xstream-1.3.1.jar

  2. python爬虫beta版之抓取知乎单页面回答（low 逼版）

    闲着无聊,逛知乎.发现想找点有意思的回答也不容易,就想说要不写个爬虫帮我把点赞数最多的给我搞下来方便阅读,也许还能做做数据分析(意淫中--) 鉴于之前用python写爬虫,帮运营人员抓取过京东的商品品 ...

  3. SMTP Error: Could not connect to SMTP host

    PHPMailer是一个非常棒的开源邮件类,使用也非常简单,但是对于虚拟主机来说,往往要受到各种限制.刚才我在虚拟主机上使用PHPMailer就遇到一个“SMTP Error: Could not c ...

  4. ODP方式，大批量数据写入ORACLE数据库

    项目中在同步数据的时候,需要把获得的数据DataTable,写入oracle数据库 因为System.Data.OracleClient写入方式写入大批量数据特别慢,改用Oracle.DataAcce ...

  5. ElasticSearch 自定义排序处理

    使用function_score进行分组处理,利用分组函数script_score进行自定义分值处理, 注意:使用script功能需要在配置中打开脚本功能: script.inline: on   s ...

  6. 快速原型设计工具-Axure RP的介绍及简单使用（生产初期向客户展示设计产品的原型-也就是展示产品）

    啧啧~~ 给大家介绍一款超棒的原型设计工具--美国Axure Software Solution公司旗舰产品Axure RP 这款工具通俗的说呢,就是在项目整体需求考察后对整体设计一个简要性概括!设计 ...

  7. as3正则表达式

    1.新建正则表达式,有两种方式var exp1:RegExp = new RegExp("ABCD","g");var exp2 = /ABCD/g;//g g ...

  8. PDO和消息队列的一点个人理解

    什么是消息队列,百度百科说,···消息队列····是在消息的传输过程中保存消息的容器. 看着网上林林总总的文章,都说是为了应对高并发,处理数据量超级大的一种数据容器,也可以说是利用各种方式,先把数据存 ...

  9. Vanishing point detection

    https://marcosnietoblog.wordpress.com/code/

  10. Portal 设置

    nodatas 设置agent 状态,其采集指标 agent.alive 上报中断时,通知用户. hostgroups设置 模版设置