(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. hdu_4787_GRE Words Revenge(在线AC自动机)

    题目链接:hdu_4787_GRE Words Revenge 题意: 总共有n个操作,2种操作.每行读入一个字符串. 1.如果字符串以+开头,此为单词(即模式串,不考虑重复) 2.如果字符串以?开头 ...

  2. jQuery 学习小结

    1,jQuery是一个简单的JavaScript库,提供了一系列辅助函数:以下简称jq; 使用jq时,通常将jq代码放到head部分的事件处理方法中,也可以将其单独写出 .js 文件,引入:但无论哪种 ...

  3. linux中的守护进程

    概念Daemon(精灵)进程,是Linux中的后台服务进程,生存期较长的进程,通常独立于控制终端并且周期性地执行某种任务或等待处理某些发生的事件.模型守护进程编程步骤1. 创建子进程,父进程退出所有工 ...

  4. SQL函数学习（一）：substring()函数

    秒懂例子: substring('98765',-1,3) 结果:9 substring('98765',0,3) 结果:98 substring('98765',1,3) 结果:987 在操作sql ...

  5. python&MongoDB

    1 #!/usr/bin/python 2 #-*- coding:utf-8 3 import pymongo 4 connection=pymongo.MongoClient() 5 tdb=co ...

  6. 用非GUI模式执行测试，jp@gc - PerfMon Metrics Collector会出现无法获取正确数据的解决办法

    用非GUI模式执行测试,jp@gc - PerfMon Metrics Collector会出现无法获取正确数据(实际显示的是Response Times Over Time),解决办法:在GUI模式 ...

  7. ios导航栏又按钮添加图片后使其保持原色

    UIBarButtonItem *rightBarItem = [[UIBarButtonItem alloc] initWithTitle:nil style:UIBarButtonItemStyl ...

  8. Chapter 2 Open Book——3

    But when I walked into the cafeteria with Jessica — 但是当我和Jessica 一起走进自助餐厅的时候 trying to keep my eyes ...

  9. Android 面试题（转）

    转自:http://www.jobui.com/mianshiti/it/android/2682/ 1. Android dvm的进程和Linux的进程, 应用程序的进程是否为同一个概念DVM指da ...

  10. STM32F446 OTG_FS_DP/DM调试

    之前项目用STM32F207,现在升级到用STM32F446处理器,用到USB的OTG_FS模式接法: 1.USB只连接了DP/DM 2.DP需上拉1.5K的电阻到3.3V 3.PA9(VBUS) 和 ...