(function($){

$.fn.tableUI=function(options){

      var defaults={

         evenRowclass:"evenRow",

         oddrowclass:"oddRow",

         activeRowClass:"activeRow"

         }

     var options=$.extend(defaults,options);

     this.each(function(){     //each历编

                        thistable=$(this);

                        thistable.find("tr:even").addClass(options.evenRowclass);

                        thistable.find("tr:odd").addClass(options.oddrowclass);

                        });

    //鼠标经过，离开的tr的变化

    thistable.find("tr").bind("mouseenter mouseleave",function(e){

    $(this).toggleClass(options.activeRow);

                                                                                   });  

}

})(jQuery);

上是tableUI.js

以下是html页面

<!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>无标题文档</title>

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

<script type="text/javascript" src="tableUI.js"></script>

<script>

$(document).ready(function (){

    $('#tbl, #tbl2').tableUI();

});

</script>

<style>

.evenRow{background-color:#FFCCCC;}

.oddRow{background-color:#CCCCCC;}

.activeRow{background-color:#CCCCFF;}

</style>

</head>  

<body>

<table id="tbl" style="width:400px;" border="5px">

    <tr>

        <td><span style="border:1px solid red; display:block;">1111111111111</span></td>

        <td>1111111111111</td>

    </tr>

    <tr>

        <td>1111111111111</td>

        <td>1111111111111</td>

    </tr>

    <tr>

        <td>1111111111111</td>

        <td>1111111111111</td>

    </tr>

    <tr>

        <td>1111111111111</td>

        <td>1111111111111</td>

    </tr>

</table>

</body>

</html>

tab奇偶行颜色交替+插件的更多相关文章

  1. 如何修改antd中表格的表头样式和奇偶行颜色交替

    在做antd表格时通常会用到table组件,但是table的表头时给定的,那么怎么修改表头的颜色呢? 这里用的时less的写法,在全局环境中写,所有的table表头都会变成自己定义的颜色 定义好表头的 ...

  2. WPF ListView控件设置奇偶行背景色交替变换以及ListViewItem鼠标悬停动画

    原文:WPF ListView控件设置奇偶行背景色交替变换以及ListViewItem鼠标悬停动画 利用WPF的ListView控件实现类似于Winform中DataGrid行背景色交替变换的效果,同 ...

  3. table中嵌套table，如何用jquery来控制奇偶行颜色

    总是要趁着自己还有记忆的时候,把该记录下来的都记录下来,着实是不敢恭维自己的记性. 相信很多时候,我们前端人员,经常会用到table里面的某个td中还嵌套着table,而这个时候还总要去弄奇偶行的颜色 ...

  4. html table奇偶行颜色设置 (CSS选择器)

    :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型.n 可以是数字.关键词或公式. 下面的例子, 设置表格的奇偶行背景颜色不同:单独设置表格的第1列背景颜色不同. & ...

  5. 当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同 (纯CSS)

    <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Prope ...

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

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

  7. flex 4 datagrid 奇偶行颜色设置

    <s:DataGrid width="100%" height="100%" alternatingRowColors="[#ffFFff,#e ...

  8. Bootstrap table插件 被选中的行颜色改变

    参考:https://www.jianshu.com/p/1bb4c37ef636 在 bootstrap-table.min.css 中修改源码 //选中行颜色 .fixed-table-conta ...

  9. C#/VB.NET 如何在Excel中使用条件格式设置交替行颜色

    说起高亮数据行,不让人想起了交替颜色行,有的人把交替颜色行也都设置成高亮,不仅不美观,而且对阅读还是个干扰.隔行交替的颜色是为了阅读不串行,这些行只是环境,数据才是主体.那么如何通过C#/VB.NET ...

随机推荐

  1. 6、plsql编程

    一.PLSQL编程思维导图 二.PLSQL编程思维导图对应笔记 PL/SQL编程 @Holly老师 5.1 为什么学习PL/SQL编程? 当我们要批量插入100万数据,怎么办? .难道要写一百条ins ...

  2. ubuntu 调试库

    .安装带有调试信息的libc: sudo apt-get install libc6-dbg .下载libc源码 a.选定一个放置源码的目录并进入,如 /home/kent/dev-os/libc6- ...

  3. Vultr免费vps注册和使用简易教程

    如果你是站长,寻找托管网站的主机,或者是开发者,需要搭建服务器环境,选购vps是必须的.强烈不推荐国内的vps产品,没有性价比,维护水平又烂,甚至某些国内所谓云主机vps安装后门,监控你的数据.海外v ...

  4. 第二次冲刺spring会议（第六次会议）

    [例会时间]2014/5/8 21:15 [例会地点]9#446 [例会形式]轮流发言 [例会主持]马翔 [例会记录]兰梦 小组成员:兰梦 ,马翔,李金吉,赵天,胡佳 奇

  5. 高精度运算专题1-加法运算（The addition operation）

    这个专题呢,我就来讲讲高精度的加法,下面是一个计算加法的函数(用数组a加上数组b结果存到数组c里面). 思路:先测一下数组a和数组b的长度,分别放到a[0].b[0]里面去,再从第二位开始相加,记得满 ...

  6. js 中创建对象

    对象是什么 从JavaScript定义上讲对象是无序属性的集合,其属性可以包含基本值.对象或函数.也就是说对象是一组没有特定顺序的属性,每个属性会映射到一个值上,是一组键值对,值可以是数据或对象. 最 ...

  7. D - Digging（01背包，贪心）

    D - Digging Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%lld & %llu Submit St ...

  8. html5游戏开发框架之lufylegend开源库件学习记录

    下载地址http://lufylegend.com/lufylegend 引用 <script type="text/javascript" src="../luf ...

  9. vs2010环境下将Win32控制台应用程序，改为Win32项目

    进入工程属性后,一次进入下面选项做相应修改 连接器 ---> 系统 --->子系统: 控制台 (/SUBSYSTEM:CONSOLE)改为:窗口 (/SUBSYSTEM:WINDOWS)

  10. 简单的JDBC连接oracle数据库例子

    java连接Oracle数据库 JDBC(Java Data Base Connectivity,java数据库连接),那么我们该如何用java进行数据库的连接呢. import java.sql.C ...