(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_5585_Less Time, More profit(二分+最大权闭合图)

    题目链接:hdu_5585_Less Time, More profit 题意: 有n个工厂,每建一个工厂要花费vi,需要时间ti,然后有m个商店,每个商店需要在指定的k个工厂中进货,才能盈利,如果其 ...

  2. asp.net学习视频资料地址链接

    ASP.NET开发学习视频教程大全(共800集) http://felix520wj.blog.51cto.com/7129746/1548458 http://study.163.com/cours ...

  3. Delphi用ADOquery主从表例子(转)

    http://blog.csdn.net/kandy_zheng/article/details/1639184 在sql server 的northwide 中建立主表 create table s ...

  4. 在线用户管理－－ESFramework 4.0 进阶（05）

    无论我们采用何种通信框架来构建我们的分布式系统,在服务端进行用户管理都是非常重要的一个环节.然而用户管理是否应该隶属于通信框架了?这个并不一定,通常来说,用户管理是与具体应用紧密相关的,应该是由应用解 ...

  5. 【Office Web Apps】在 SharePoint 中使用 Office Web Apps

    在 SharePoint 中使用 Office Web Apps 在安装并配置了 Microsoft Office Web Apps 的 SharePoint 网站上,通过 Office Web Ap ...

  6. Sublime Text学习笔记

    1.快捷键(Key Bindings)   Preferences -> Key Bindings ->Default   会打开一个配置文件,里面全是配置信息 2.代码片段(Snippe ...

  7. G - 娜娜梦游仙境系列——梦醒

    G - 娜娜梦游仙境系列——梦醒 Time Limit: 2000/1000MS (Java/Others)    Memory Limit: 128000/64000KB (Java/Others) ...

  8. C++设计模式-Iterator迭代器模式

    ref: http://www.cnblogs.com/onlycxue/archive/2013/12/25/3490738.html

  9. PHP中require和include的区别

    include()与require()的功能相同 include(include_once) 与 require(require_once)都是把把包含的文件代码读入到指定位置来,但是二者再用法上有区 ...

  10. 小箭头的写法，z-index在ie7显示混乱问题

    一.jQuery 发布 1.9 正式版,最后支持 IE 6/7/8,2.0以上的版本都不支持这三个浏览器了. 二.小箭头的写法与旋转切换(一直以为这样的只以切图片,原来未必哦.) <style& ...