一.效果展示如下

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. IOS系列swift语言之课时二

    今天我们要讲的就是函数[对于函数,在最后面还有几道题,喜欢的博友可以看了自己做一下,和我交流一下] 当然这与我们的c语言还是有一定的共同之处的,对于有一些c语言或者是java基础的童鞋,我觉得是很容易 ...

  2. jquery 拖拽，框选的一点积累

    拖拽draggable,框选 selectable,按ctrl多选,临近辅助对齐,从工具栏拖工具  等,和jqueryui的selectable不同,是在一个父div里框选子div(类似框选文件),一 ...

  3. 列出场景对象Lightmap属性

    首先上效果图: 编辑器代码: using UnityEngine; using UnityEditor; using System.Collections; public class Lightmap ...

  4. SQL Server 无法生成 FRunCM 线程。请查看 SQL Server 错误日志和 Windows 事件日志

    1.IP地址配置不正确: 打开 Microsoft SQL Server 2005配置工具下的SQL Server Configuration Manager,选择MSSQLSERVER协议, 然后双 ...

  5. WPF绘制折线

    WPF后台绘制折线,填充到一个GRID下 private void btnPreview_Click(object sender, RoutedEventArgs e) { GridImg.Child ...

  6. bootstrap中的Grid system详解

    啦啦啦,都十月中旬啦,好快啊,这个月的多一半都过去了,然而我才写第三篇随笔,小颖得加油啦~~~ 下面来看下小颖给大家分享的内容 1.   .col-md-*和.col-xs-* <!doctyp ...

  7. Vue 方法与事件处理器

    按键修饰符 在监听键盘事件时,我们经常需要检测 keyCode.Vue.js 允许为 v-on 添加按键修饰符: <!-- 只有在 keyCode 是 时调用 vm.submit() --> ...

  8. 前端学PHP之面向对象系列第六篇——简单图形面积计算器实现

    前面的话 本文用面向对象的技术来实现一个简单的图形面积计算器 图形类 //rect.class.php <?php abstract class Shape{ public $name; abs ...

  9. .Net 转战 Android 4.4 日常笔记（2）--HelloWorld入门程序

    我不知道人们为什么那么喜欢用HelloWorld来做为自己的第一个程序入门,为什么不是hello **其他的东西或者hi. 一.打开ADT 的Eclipse开发工具新建一个Android项目 New- ...

  10. IOS遍历网页获取网页中<img>标签中的图片url

    前言: 项目中遇见一个需求遍历网页中所有的<img>标签并且去处图片的url 第一步:编写获取<img >标签的正则表达式,代码如下: -(NSArray*)getImgTag ...