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;}