一.效果展示如下

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. 2013 duilib入门简明教程 -- VS环境配置(2)

        既然是入门教程,那当然得基础点,因为搜索duilib相关资料时,发现有些小伙伴到处都是编译错误,以及路径配置错误等等,还有人不知道SVN,然后一个个文件手动下载的.     其实吧,duili ...

  2. SikuliX简介及安装

    一.简单介绍 SikuliIDE和Sikuli Script就是现在的SikuliX,最新版本是SikuliX1.1.0, 部分兼容Sikuli JAVA API,支持Python和Ruby,Siku ...

  3. 数据库的Disk Space usage

    SQL Server占用的存储空间,包含数据库file占用的存储空间,数据库对象占用的存储空间. 一,数据库file占用的存储空间 1,使用 sys.master_files 查看数据库中各个file ...

  4. Sql Server系列：Delete语句

    数据的删除将删除表的部分或全部记录,删除时可以指定删除条件从而删除一条或多条记录.如果不指定删除条件,DELETE语句将删除表中全部的记录,清空数据表. 1 DELETE语法 [ WITH <c ...

  5. Pipedata3d - Welding Neck Flange

    Pipedata3d - Welding Neck Flange eryar@163.com Abstract. Pipedata3d show piping component data in ta ...

  6. AngularJS之初级Route【一】（六）

    前言 这一节我们来讲讲AngularJS中的路由以及利用AngularJS在WebAPi中进行CRUD.下面我们一起来看看. 话题 当我们需要进行路由映射时即用到$route服务,在AngularJS ...

  7. Rehosting the Workflow Designer

    官方文档:https://msdn.microsoft.com/en-us/library/dd489451(v=vs.110).aspx The Windows Workflow Designer ...

  8. EasyUI DataGrid formatter 格式化增加链接

            function fLoadTable() {             $('#tt').datagrid({                 title: '',           ...

  9. react+redux教程（二）redux的单一状态树完全替代了react的状态机？

    上篇react+redux教程,我们讲解了官方计数器的代码实现,react+redux教程(一).我们发现我们没有用到react组件本身的state,而是通过props来导入数据和操作的. 我们知道r ...

  10. Apache Sqoop - Overview——Sqoop 概述

    Apache Sqoop - Overview Apache Sqoop 概述 使用Hadoop来分析和处理数据需要将数据加载到集群中并且将它和企业生产数据库中的其他数据进行结合处理.从生产系统加载大 ...