(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. windows网络编程（1）同步套接字

    1.socket是应用程序与网络驱动程序的桥梁,在应用程序中创建socket,将数据交付给socket即完成数据传输,剩下的任务由socket和网络驱动程序完成: 2.套接字类型:SOCK_STREA ...

  2. ggplot2 scale相关设置

     ggplot2   scale相关设置 标度设置:主要用于在ggplot画图后的各个图层进行调整设置. 1.相关属性scale设置 包括scale_size().scale_alpha().scal ...

  3. IOS CrackMe 破解学习

    一直在看别人如何破解一个app,下面自己也尝试着学习怎么去破解一个app的密码,下面是完整的过程. 准备工作: 一台mac或者pc安装了ssh客户端 一台越狱的iphone iphone上安装了ope ...

  4. css3的特效拓展...

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

  5. Java 算法

    1.简单的冒泡排序 //冒泡算法一共两种 // -----冒泡算法(1) int a[]={23,69,4,58,1,20}; for (int i = 0; i < a.length-1; i ...

  6. 第三次冲刺spring会议（第六次会议）

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

  7. 斯坦福大学公开课：iOS 7应用开发 笔记

    2015-07-06 第一讲   课务.iOS概述 -------------------------------------------------- 开始学习斯坦福大学公开课:iOS 7应用开发留 ...

  8. 归并排序的go语言与C++实现对比

    最近对go语言发生了兴趣,发现go语言语法简洁,非常适合算法的描述和实现,于是对归并排序进行了实现. 例子中需要排序的队列是长度为100的从100到1的数列,排序算法是正序排序,排序正确的话,结果应当 ...

  9. Windows命令查看文件MD5码

    D:\>certutil -hashfile md5test.txt MD5 MD5 哈希(文件 md5test.txt): d6 f6 bb 38 b5 6b 67 8f 34 9b e4 d ...

  10. cocoaPods的安装方法

    1.打开终端 2.先升级Gem sudo gem update --system 3.切换cocoapods的数据源 [先删除,再添加,查看] gem sources --remove https:/ ...