一.效果展示如下

jQuery组件之表格插件源码

  //表格选中插件

 //方式一

 (function($){

     var chosTabBgColor = function(options){

             //设置默认值

             var options = $.extend({

                 odd:"odd", //奇数

                 even:"even",//偶数

                 selected:"selected"

             },options);

             $("tbody tr:odd", this).addClass(options.odd);

             $("tbody tr:even", this).addClass(options.even);

             //判定是否选中

             var hasSelected = $("tbody tr").hasClass("selected");

             $("tbody>tr", this).click(function(){

                 var $that = $(this);

                 //判断是否选中

                 var hasSelected = $that.hasClass(options.selected);

                 //如果选中，则移除selected类，否则添加selected类

                 $that[hasSelected ? "removeClass" : "addClass"](options.selected)

                 //查找内部的checkbox，并设置其属性

                 .find("[type=checkbox]").attr("checked",!hasSelected);

             });

             // 如果单选框默认情况下是选择的，则高色.

             $("tbody>tr:has(:checked)", this).addClass(options.selected);

     }

     $.fn.chosTabBgColor = chosTabBgColor;

 })(jQuery)

  //方式二

 /*(function($){

     $.fn.extend({

         "chosTabBgColor":function(options){

             //设置默认值

             var options = $.extend({

                 odd:"odd", //奇数

                 even:"even",//偶数

                 selected:"selected"

             },options);

             $("tbody tr:odd", this).addClass(options.odd);

             $("tbody tr:even", this).addClass(options.even);

             //判定是否选中

             var hasSelected = $("tbody tr").hasClass("selected");

             $("tbody>tr", this).click(function(){

                 var $that = $(this);

                 //判断是否选中

                 var hasSelected = $that.hasClass(options.selected);

                 //如果选中，则移除selected类，否则添加selected类

                 $that[hasSelected ? "removeClass" : "addClass"](options.selected)

                 //查找内部的checkbox，并设置其属性

                 .find("[type=checkbox]").attr("checked",!hasSelected);

             });

             // 如果单选框默认情况下是选择的，则高色.

             $("tbody>tr:has(:checked)", this).addClass(options.selected);

             return this;//返回链式调用

         }

     });

 })(jQuery)*/

html源码

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>表格选中插件</title>

         <style>

             html {

                 font-family: "微软雅黑";

             }

             .table {

                 width: %;

                 border-collapse: collapse;

                 border: ;

             }

             .table tr th, tr td {

                 border: solid 1px #cecece;

                 padding: 8px 10px;

                 text-align: left;

             }

             .bg-00A5FF {

                 background-color: #088c78;

                 color: #fff;

             }

             .table tr {

                 cursor: pointer;

             }

             .even { background:#c7c7c7; color: #fff;}  /* 偶数行样式*/

             .odd { background:#FFFFFF; }  /* 奇数行样式*/

             .selected { background:#00a1d4; color:#E91E63;}

         </style>

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

        <!-- 作者：zhangjaingfeng 时间：-- 描述：表格选择chosTab组件 -->

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

        <script type="text/javascript">

             $(function(){

                 $(".table").chosTabBgColor({});

             })

         </script>

     </head>

     <body>

         <table class="table" cellpadding="" cellspacing="" border="">

             <colgroup>

                 <col width="10%"/>

                 <col width="30%"/>

                 <col width="30%"/>

                 <col width="30%"/>

             </colgroup>

             <thead class="bg-00A5FF">

                 <tr>

                     <th>请选择</th>

                     <th>姓名</th>

                     <th>性别</th>

                     <th>暂住地</th>

                 </tr>

             </thead>

             <tbody>

                 <tr class="">

                     <td><input type="checkbox" name=""/></td>

                     <td>Ulin</td>

                     <td>男</td>

                     <td>成都市高新区新怡华园</td>

                 </tr>

                 <tr>

                     <td><input type="checkbox" name=""/></td>

                     <td>Ylin</td>

                     <td>男</td>

                     <td>成都市高新区新怡华园</td>

                 </tr>

                 <tr>

                     <td><input type="checkbox" name=""/></td>

                     <td>Flin</td>

                     <td>男</td>

                     <td>成都市高新区新怡华园</td>

                 </tr>

                 <tr>

                     <td><input type="checkbox" name=""/></td>

                     <td>Alin</td>

                     <td>男</td>

                     <td>成都市高新区新怡华园</td>

                 </tr>

             </tbody>

         </table>

     </body>

 </html>

jQuery组件开发之表格隔行选中效果实现的更多相关文章

  1. [js开源组件开发]table表格组件

    table表格组件 表格的渲染组件,demo请点击http://lovewebgames.com/jsmodule/table.html,git源码请点击https://github.com/tian ...

  2. 简单的jquery左侧导航栏和页面选中效果

    这里是要实现导航的左侧并选中的,此功能需引用jquery 效果: 左侧导航 <div class="box"> <ul class="menu" ...

  3. stark组件开发之组合搜索页面效果和 URL

    页面效果,只是样式.这个好解决!yield 的时候. 返回几个样式出去就好了! 并且前端写上一些样式的css {% if search_group_row_list %} <div class= ...

  4. 关于jquery简单操作简单表格

    最近在摸索jquery中,想着学习过程中还是记下点自己的东西比较好,不管是日后自己查阅,亦或是对于他人有些许帮助. 也是一件两全其美的事情了. 下面我就简单 贴上自己的html中重要部分了. 具体实现 ...

  5. [js开源组件开发]数字或金额千分位格式化组件

    数字或金额千分位格式化组件 这次距离上一个组件<[js开源组件开发]table表格组件>时隔了一个月,由于最近的项目比较坑,刚挖完坑,所以来总结性提出来几个组件弥补这次的空缺,首先是金额和 ...

  6. 我的第一个jQuery插件--表格隔行变色

    虽然网上有大量的插件供我们去使用,但不一定有一款适合你的,必要的时候还是要自己动手去敲的.下面,开始我的第一个插件... 参考<锋利的JQuery>,JQuery为开发插件增设了俩个方法: ...

  7. jQuery学习(四)——使用JQ完成表格隔行换色

    1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...

  8. jQuery MiniUI 开发指南+API组件参考手册

    jQuery MiniUI 开发指南 本文档将逐步的讲解jQuery MiniUI的方方面面,从此您将踏上jQuery MiniUI的深入探索之旅.                 1.Hello M ...

  9. jQuery应用实例2：表格隔行换色

    这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...

随机推荐

  1. Qt on Android 核心编程

    Qt on Android 核心编程(最好看的Qt编程书!CSDN博主foruok倾力奉献!) 安晓辉 著   ISBN 978-7-121-24457-5 2015年1月出版 定价:65.00元 4 ...

  2. SQL 中 EXISTS 与 NOT EXISTS

    带有 EXISTS 操作符的子查询不返回任何数据,只产生逻辑真值 'true' 或逻辑假值 'false'.带有 EXISTS 操作符的子查询都是相关子查询. 相关子查询:子查询的条件依赖父查询. E ...

  3. 3.用Redis Desktop Manager连接Redis

    Redis Desktop Manager是Redis图形化管理工具,方便管理人员更方便直观地管理Redis数据. 然而在使用Redis Desktop Manager之前,有几个要素需要注意: 一. ...

  4. SQL语句来查询今天、昨天、7天内、30天的数据，经典！

    ---恢复内容开始--- 今天的所有数据:select * from 表名 where DateDiff(dd,datetime类型字段,getdate())=0 昨天的所有数据:select * f ...

  5. 【Win 10应用开发】Adaptive磁贴模板的XML文档结构

    在若干天之前,老周给大家讲了Adaptive Toast通知的XML模板,所以相应地,今天老周给大家介绍一下Adaptive磁贴的新XML模板. 同样道理,你依旧可以使用8.1时候的磁贴模板,在win ...

  6. 学用MVC4做网站六后台管理:6.1管理员(续)

    接6.1 首先在~/Areas/Admin/Models文件夹添加管理员模型Administrator.cs using System.ComponentModel.DataAnnotations; ...

  7. Android初级教程_获取Android控件的宽和高

    转载:http://blog.csdn.net/johnny901114/article/details/7839512 我们都知道在onCreate()里面获取控件的高度是0,这是为什么呢?我们来看 ...

  8. Neutron Vlan Network 原理- 每天5分钟玩转 OpenStack（92）

    前面我们陆续学习了 Neutron local network,flat network 和 DHCP 服务,从本节将开始讨论 vlan network. vlan network 是带 tag 的网 ...

  9. 在Objective-C中浅谈面向对象

    接触面向对象也有一段时间了,当时是通过C++学习的OOP,后来又接触到了PHP和Java.每种OOP的语言在面向对象上或多或少都会有不同的地方,现在在学习OC的面向对象部分,又感觉到OC面向对象的特点 ...

  10. Coreseek Windows下安装调试

    由于项目需要全文检索,后面就去网上查了下资料,找到了Sphinx[中文是狮身人面像]这个全文检索引擎,听说挺好用的,不过没有中文分词.后面又去找了一下,找到了Coreseek,一款中文全文检索/搜索软 ...