jQuery 表格隔行变色插件
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 表格隔行变色插件的更多相关文章
- 我的第一个jQuery插件--表格隔行变色
虽然网上有大量的插件供我们去使用,但不一定有一款适合你的,必要的时候还是要自己动手去敲的.下面,开始我的第一个插件... 参考<锋利的JQuery>,JQuery为开发插件增设了俩个方法: ...
- jquery插件之表格隔行变色并鼠标滑过高亮显示
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...
- jquery实现html表格隔行变色
效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...
- 用JQuery实现表格隔行变色和突出显示当前行
用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...
- JQuery实现隔行变色和突出显示当前行 效果
运行效果如下图: jquery关键代码: <script type="text/javascript"> //该文件为:js.js // 当鼠标移到表格上是,当前一行背 ...
- 表格隔行变色_CSS实现鼠标悬停高亮
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- 表格隔行变色_jQuery控制实现鼠标悬停高亮
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- css3表格隔行变色和表格选中变颜色代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript 实现表格隔行变色
JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...
随机推荐
- Java恶搞!强制关闭电脑上的程序进程!
效果 最近写代码经常和各种进程打交道,发现了一个很有意思的黑科技. 我直接说有什么用吧,可以设置每隔多少时间检查某个程序是否在使用,如果在用,就强制关闭.比如,有的sb舍友晚上就是不睡觉,一边打游戏一 ...
- java设置项目根目录 工作目录 working dictionary
改变java项目中,绝对路径的根目录 run->run configuration ->Arguments 更改 working dictioinary
- HTML5 & CSS3 & font-family
HTML5 & CSS3 & font-family 中文字体的英文名称 宋体* SimSun 黑体* SimHei 微软雅黑* Microsoft YaHei 微软正黑体 http: ...
- [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} 那么答案是 ...
- ArrayAdapter的使用
package com.pingyijinren.test; import android.content.Context; import android.view.LayoutInflater; i ...
- 洛谷 P1166 打保龄球
P1166 打保龄球 题目描述 打保龄球是用一个滚球去打击十个站立的柱,将柱击倒.一局分十轮,每轮可滚球一次或多次,以击倒的柱数为依据计分.一局得分为十轮得分之和,而每轮的得分不仅与本轮滚球情况有关, ...
- Ubuntu 16.04安装WebStorm
前提:必须正确安装JDK. 下载: http://confluence.jetbrains.com/display/WI/WebStorm+EAP 或者下载历史版本:https://www.jetbr ...
- dubbo的jmeter压测时jar包的热加载/动态加载
在做dubbo的jmeter压测时,需要把jar包放入jmeter的lib/ext目录下,但是jmeter启动的时候会自动加载这个目录lib目录及lib/ext目录,这样启动后放入这些目录下的jar包 ...
- [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 ...
- Ubuntu14.04 忘记rootpassword的解决方法
对于windows操作系统,假设忘记管理员password,事实上还是蛮好解决的. 最简单的一种方式就是使用PE--电脑店,老毛桃等等,都能够非常完美的解决问题. 假设是Linux操作系统的话.事实上 ...