<!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. 在Ubuntu下配置运行Hadoop2.4.0单节点配置

    还没有修改hosts,请先按前文修改. 还没安装java的,请按照前文配置. (1)增加用户并设立公钥: sudo addgroup hadoop sudo adduser --ingroup had ...

  2. gojs绘流程图

    引用:http://www.tuicool.com/articles/eEruaqu http://www.open-open.com/lib/view/open1435023502544.html ...

  3. sqlserver 性能优化常用方法

    查看被锁表: select request_session_id spid,OBJECT_NAME(resource_associated_entity_id) tableName from sys. ...

  4. C语言

    HTML的学习早已落下帷幕,我们已经进入了C语言的学习,这段时间时间主要学了运算符.表达式.循环语句以及数组和字符串,感觉到了一种朦朦胧胧懂得尴尬. 运算符主要包括:算术运算符.赋值运算符.关系运算符 ...

  5. （转）我如何利用前端技术得到 XXOO 网站的 VIP

    网页如图,这里只是说明整个网站的一些技术点,所以不该看的地方我都打上马赛克了,让我们揭开这些网站的整个前端工作原理首先刚进去的时候显示一堆乱七八糟的东西,点进去其中一个页面,下面各种虚假评论,然后每隔 ...

  6. 另一种在WINFORM中使用XNA的方法

    之前在写化学分子模型制作程序的时候,使用一种方法,将WINFORM控件嵌入到XNA窗体中,从而实现了即使用WINFORM窗体控件又使用XNA.最近在写另一个物理运动学课件制作程序,同样使用XNA,但从 ...

  7. canvas简单处理图片(反色处理)

    用canvas可以简单地处理图像,比如切割 灰色处理等,今天记下的是图像的反色处理. <!DOCTYPE html> <html> <head> <meta ...

  8. css3知识

    一.box-sizing 属性 规定两个并排的带边框的框 二.align-items (适用于父类容器上) 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式. 值: flex-start:弹性盒子 ...

  9. Java语言程序设计(基础篇)第一章

    第一章 计算机.程序和Java概述 1.1 引言 什么是程序设计呢? 程序设计就是创建(或者开发)软件,软件也称为程序. 1.2 什么是计算机 计算机是存储和处理数据的电子设备,计算机包括硬件(har ...

  10. eclipse下导入jdk源码

    一直想好好看看jdk的源码,虽然可以直接解压jdk下的src看,但是终究不方便!后来发现可以导入到eclipse中,就在网上找了一些方法,下面就和大家分共享: step1:打开eclipse选择Win ...