jQuery 表格隔行变色插件

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

基本的JS框架代码如下：

1 ;(function($) {
2     $.fn.extend({
3         //这里写插件代码
4     });
5 })(jQuery);

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

JS代码

1. 插件编写

 1 //插件编写
 2 ;(function($) {
 3     $.fn.extend({
 4         "alterBgColor":function(options){
 5             //设置默认值
 6             options=$.extend({
 7                 odd:"odd",    /* 偶数行样式*/
 8                 even:"even", /* 奇数行样式*/
 9                 selected:"selected" /* 选中行样式*/ 
10             },options);
11             $("tbody>tr:odd",this).addClass(options.odd);
12             $("tbody>tr:even",this).addClass(options.even);
13             $('tbody>tr',this).click(function() {
14                 //判断当前是否选中
15                 var hasSelected=$(this).hasClass(options.selected);
16                 //如果选中，则移出selected类，否则就加上selected类
17                 $(this)[hasSelected?"removeClass":"addClass"](options.selected)
18                     //查找内部的checkbox,设置对应的属性。
19                     .find(':checkbox').attr('checked',!hasSelected);
20             });
21             // 如果单选框默认情况下是选择的，则高色.
22             $('tbody>tr:has(:checked)',this).addClass(options.selected);
23             return this;  //返回this，使方法可链。
24         }
25     });
26 })(jQuery);

2. 插件应用

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

HTML代码

 1 <table id="table1">
 2     <thead><tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead>
 3     <tbody>
 4         <tr>
 5             <td><input type="checkbox" name="choice" value=""/></td>
 6             <td>张山</td>
 7             <td>男</td>
 8             <td>浙江宁波</td>
 9         </tr>
10         <tr>
11             <td><input type="checkbox" name="choice" value="" /></td>
12                 <td>李四</td>
13             <td>女</td>
14             <td>浙江杭州</td>
15         </tr>
16         <tr>
17             <td><input type="checkbox" name="choice" value="" checked="checked" /></td>
18                     <td>王五</td>
19             <td>男</td>
20             <td>湖南长沙</td>
21         </tr>
22         <tr>
23             <td><input type="checkbox" name="choice" value="" /></td>
24             <td>找六</td>
25             <td>男</td>
26             <td>浙江温州</td>    
27         </tr>
28         <tr>
29         <td><input type="checkbox" name="choice" value="" /></td>
30                 <td>Rain</td>
31             <td>男</td>
32             <td>浙江杭州</td>
33         </tr>
34         <tr>
35             <td><input type="checkbox" name="choice" value="" checked="checked" /></td>
36             <td>MAXMAN</td>
37             <td>女</td>
38             <td>浙江杭州</td>
39         </tr>
40     </tbody>
41 </table>

View Code

CSS代码

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

View Code

jQuery 表格隔行变色插件

推荐阅读