(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. CentOS安装Ruby组件

    ruby安装#安装ruby组件yum install ruby ruby-irb ruby-devel rubygems rpm-build -y#安装Apache服务器yum install htt ...

  2. QQ头像一键添加校徽

    简书链接地址:http://www.jianshu.com/p/dcb2cbd07e4d 项目展示链接地址:www.zhaozhengyu.cn/SchoolImage/index.html

  3. openwrt设置语言的过程

    设置语言的流程一.关联的配置文件/etc/config/luci查看配置文件内容如下:root@hbg:/# cat /etc/config/luci config core 'main'       ...

  4. 正方形网格 TRIANGLE_STRIP连接

    unsigned int vIdx = 0, iIdx = 0; for (unsigned int stripRow = 0; stripRow < stripRows; stripRow++ ...

  5. html5标准格式示代码

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  6. centos6下的mysql的安装

    第1步.yum安装mysql [root@stonex ~]#  yum -y install mysql-server 安装结果: Installed:     mysql-server.x86_6 ...

  7. 第二题 已知有十六支男子足球队参加2008 北京奥运会。写一个程序，把这16 支球队随机分为4 个组。采用List集合和随机数     2008 北京奥运会男足参赛国家：  科特迪瓦，阿根廷，澳大利亚，塞尔维亚，荷兰，尼日利亚、日本，美国，中国，新西 兰，巴西，比利时，韩国，喀麦隆，洪都拉斯，意大利

    import java.util.ArrayList; import java.util.List; import java.util.Random; public class List1 { pub ...

  8. 解决 .NET Core 中 GetHostAddressesAsync 引起的 EnyimMemcached 死锁问题

    在我们将站点从 ASP.NET + Windows 迁移至 ASP.NET Core + Linux 的过程中,目前遇到的最大障碍就是 —— 没有可用的支持 .NET Core 的 memcached ...

  9. 对端口Com1的访问被拒绝

    某项目中,需通过com口的方式读取CF卡的rfid,. 问题:当我关闭模块,然后第二次打该模块时,弹出如下错误”对端口Com1的访问被拒绝”(编程这一行业,不是找不到对象,就是被xxx拒绝!): 断点 ...

  10. Subordinates

    Subordinates time limit per test 1 second memory limit per test 256 megabytes input standard input o ...