一.效果展示如下

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. Atitit 分区后的查询  mysql分区记录的流程与原理

    Atitit 分区后的查询  mysql分区记录的流程与原理 1.1.1. ibd是MySQL数据文件.索引文件1 1.2. 已经又数据了,如何分区? 给已有的表加上分区 ]1 1.3. 分成4个区, ...

  2. Struts2-修改数据

    <body> 用户信息:<br><br> <% List<User> lu = (List<User>)request.getAttr ...

  3. WPF入门教程系列二十二——DataGrid示例(二)

    DataGrid示例的后台代码 1)  通过Entity Framework 6.1 从数据库(本地数据库(local)/Test中的S_City表中读取城市信息数据,从S_ Province表中读取 ...

  4. jdk1.7.0_80源码包结构

    解压源码src.zip,jdk源码结构如下所示: src |--com.sun    sun公司对jdk的实现,Oracle官方不支持,不保证跨平台(可能一些类linux有而windows没有),甚至 ...

  5. HTML5系列：HTML5表单

    1. input元素新增类型 url类型 url类型的input元素是一种用来输入url的文本框,提交时如果该文本框中内容不是url格式,则不允许提交. <input type="ur ...

  6. Sql Server系列：存储过程

    1 存储过程简介 存储过程是使用T-SQL代码编写的代码段.在存储过程中,可以声明变量.执行条件判断语句等其他编程功能.在MS SQL Server 2012中存储过程主要分三类:系统存储过程.自定义 ...

  7. WPF如何仿制QQ2013登录窗口的关闭效果

    昨天,有位朋友问我,WPF能做出像QQ2013窗口在关闭时那个貌似透明过渡的动画吗?我就歪着脸跟他说:"只有你想不到的,没有WPF做不到的". 他又接着说:"我知道肯定会 ...

  8. SqlServer用sql对表名、字段做修改

    1.重命名表  下例将表 users重命名为 userdd.  EXEC sp_rename 'users', 'userdd'  2. 重命名列  下例将表 userdd中的列 sex 重命名为 s ...

  9. EasyUI DataGrid 实用例子(2015-05-22)

    代码经过精心改良,可以直接使用,具体看注释吧. 1,前台,代码如下:         <%@ Page Language="C#" AutoEventWireup=" ...

  10. Notepad++使用小结

    还是那句话“工欲善其事必先利其器”用Notepad++也有一段时间了,也积累了一些东西,写篇博文与大家分享一下使用Notepad++的一些心得.  简单的说一下Notepad++是什么东西吧,Note ...