jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法。

基本的JS框架代码如下:

 ;(function($) {
$.fn.extend({
//这里写插件代码
});
})(jQuery);

例子:编写一个表格隔行变色插件

JS代码

1. 插件编写

 //插件编写
;(function($) {
$.fn.extend({
"alterBgColor":function(options){
//设置默认值
options=$.extend({
odd:"odd", /* 偶数行样式*/
even:"even", /* 奇数行样式*/
selected:"selected" /* 选中行样式*/
},options);
$("tbody>tr:odd",this).addClass(options.odd);
$("tbody>tr:even",this).addClass(options.even);
$('tbody>tr',this).click(function() {
//判断当前是否选中
var hasSelected=$(this).hasClass(options.selected);
//如果选中,则移出selected类,否则就加上selected类
$(this)[hasSelected?"removeClass":"addClass"](options.selected)
//查找内部的checkbox,设置对应的属性。
.find(':checkbox').attr('checked',!hasSelected);
});
// 如果单选框默认情况下是选择的,则高色.
$('tbody>tr:has(:checked)',this).addClass(options.selected);
return this; //返回this,使方法可链。
}
});
})(jQuery);

2. 插件应用

 //插件应用
$(function(){
$("#table")
.alterBgColor() //应用插件
.find("th").css("color","red");//可以链式操作
})

HTML代码

 <table id="table1">
<thead><tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead>
<tbody>
<tr>
<td><input type="checkbox" name="choice" value=""/></td>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>

CSS代码

 table        { border:;border-collapse:collapse;}
td { font:normal 12px/17px Arial;padding:2px;width:100px;}
th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even { background:#FFF38F;} /* 偶数行样式*/
.odd { background:#FFFFEE;} /* 奇数行样式*/
.selected { background:#FF6500;color:#fff;}

jQuery 表格隔行变色插件的更多相关文章

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

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

  2. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

  3. jquery实现html表格隔行变色

    效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...

  4. 用JQuery实现表格隔行变色和突出显示当前行

    用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...

  5. JQuery实现隔行变色和突出显示当前行 效果

    运行效果如下图: jquery关键代码: <script type="text/javascript"> //该文件为:js.js // 当鼠标移到表格上是,当前一行背 ...

  6. 表格隔行变色_CSS实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  7. 表格隔行变色_jQuery控制实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  8. css3表格隔行变色和表格选中变颜色代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. JavaScript 实现表格隔行变色

    JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...

随机推荐

  1. Java恶搞!强制关闭电脑上的程序进程!

    效果 最近写代码经常和各种进程打交道,发现了一个很有意思的黑科技. 我直接说有什么用吧,可以设置每隔多少时间检查某个程序是否在使用,如果在用,就强制关闭.比如,有的sb舍友晚上就是不睡觉,一边打游戏一 ...

  2. java设置项目根目录 工作目录 working dictionary

    改变java项目中,绝对路径的根目录 run->run configuration ->Arguments 更改 working dictioinary

  3. HTML5 & CSS3 & font-family

    HTML5 & CSS3 & font-family 中文字体的英文名称 宋体* SimSun 黑体* SimHei 微软雅黑* Microsoft YaHei 微软正黑体 http: ...

  4. [cf360 div1.C]The Values You Can Make[Dp]

    题意:有n个硬币,面值不同,求能组成K的方案中,每个方案的硬币可以凑成那些答案. 例如, K=5 面值={1,1,1,2,3} K={1,1,1,2} K={1,1,3} K={2,3} 那么答案是 ...

  5. ArrayAdapter的使用

    package com.pingyijinren.test; import android.content.Context; import android.view.LayoutInflater; i ...

  6. 洛谷 P1166 打保龄球

    P1166 打保龄球 题目描述 打保龄球是用一个滚球去打击十个站立的柱,将柱击倒.一局分十轮,每轮可滚球一次或多次,以击倒的柱数为依据计分.一局得分为十轮得分之和,而每轮的得分不仅与本轮滚球情况有关, ...

  7. Ubuntu 16.04安装WebStorm

    前提:必须正确安装JDK. 下载: http://confluence.jetbrains.com/display/WI/WebStorm+EAP 或者下载历史版本:https://www.jetbr ...

  8. dubbo的jmeter压测时jar包的热加载/动态加载

    在做dubbo的jmeter压测时,需要把jar包放入jmeter的lib/ext目录下,但是jmeter启动的时候会自动加载这个目录lib目录及lib/ext目录,这样启动后放入这些目录下的jar包 ...

  9. [Maid] Write Tasks in Markdown with Maid

    Maid enables you to write your tasks in Markdown. Create a maidfile.md or a README.mdthen add Header ...

  10. Ubuntu14.04 忘记rootpassword的解决方法

    对于windows操作系统,假设忘记管理员password,事实上还是蛮好解决的. 最简单的一种方式就是使用PE--电脑店,老毛桃等等,都能够非常完美的解决问题. 假设是Linux操作系统的话.事实上 ...