一.效果展示如下

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. android 获取屏幕宽度和高度

    // 获取屏幕宽高(方法1) int screenWidth = getWindowManager().getDefaultDisplay().getWidth(); // 屏幕宽(像素,如:480p ...

  2. Spring学习记录(十一)---使用注解和自动装配

    Spring支持用注解配置Bean,更简便. 上面的组件,是根据实际情况配的.比如写的一个类,是做业务处理的,那就用注解@Service表示服务层组件,以此类推.将整体分成不同部分. 要在xml加入c ...

  3. PHP的性能演进(从PHP5.0到PHP7.1的性能全评测)

    本文是最初是来自国外的这篇:PHP Performance Evolution 2016, 感谢高可用架构公众号翻译成了中文版, 此处是转载的高可用架构翻译后的文章从PHP 5到PHP 7性能全评测( ...

  4. 动态加载JS 和 CSS

    <script type="text/javascript"> $(function () { var filename = '/assets/css/main.css ...

  5. 解密jQuery事件核心 - 模拟事件（四）

    前几章已经把最核心的实现都分解过了,这一章我们看看jQuery是如何实现事件模拟的 在Internet Explorer 8和更低,一些事件change 和 submit本身不冒泡,但jQuery修改 ...

  6. 使用SecureCRT在远程主机和本地之间传输文件

    终于弄明白怎样在SecureCRT的shell里用命令上传下载文件.SecureCRT记住密码的功能容易设置,于是偶这懒人,后来习惯了用 SecureCRT,但其上传文件功能偶一直没弄明白过.之前一直 ...

  7. JAVA--继承

    项目开发遇到一个问题,稀里糊涂给实现了,现在重点讨论一下这是个什么情况,大神们如果看到希望给点指点. 问题:子类与父类具有相同的属性和方法,将子类实例化为父类,调用对应属性的get.set方法,打印出 ...

  8. T-SQL：毕业生出门需知系列（四）

    第4课 过滤数据 4.1 使用 WHERE 子句:过滤 只检索所需数据需要指定搜索条件(即过滤条件). WHERE 子句在表名(FROM 子句)后给出,根据 WHERE 子句中指定的条件过滤. SEL ...

  9. Cesium原理篇：6 Render模块(5: VAO&RenderState&Command)

    VAO VAO(Vertext Array Object),中文是顶点数组对象.之前在<Buffer>一文中,我们介绍了Cesium如何创建VBO的过程,而VAO可以简单的认为是基于VBO ...

  10. Microsoft Visual Studio 插件

    AnkhSVN BatchFormat CodeMaind Nuget Package Manager