表格隔行变色（插件）

• 导包

<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>

• 创建表格

  <table>
           <tr>
               <td>1</td>
               <td>2</td>
               <td>3</td>
           </tr>
           <tr>
               <td>11</td>
               <td>22</td>
               <td>33</td>
           </tr>
           <tr>
               <td>111</td>
               <td>222</td>
               <td>333</td>
           </tr>
  </table>

   

 

• 帮表格弄好基本样式，并把变色的样式也编写完

<style>
            *{margin: 0;padding: 0;}
            table{width: 860px;margin: 0 auto;}
            table tr td{height: 45px;text-align: center;}


            .even{background: #2E6DA4;color: #fff;}
            .odd{background: cornflowerblue;color: #fff;}

</style>

 

• 创建js文件，并导入网页

<script type="text/javascript" src="js/table.js" ></script>

 

• 编写插件（js文件）

;(function($){
    
    $.fn.table = function(options){
        var defaults = {
            "even":"even",
            "odd":"odd"
        }
        
        var options = $.extend(defaults,options);
        this.each(function(){
            var _this = $(this)
            _this.find("tr:even").addClass(options.even)
            _this.find("tr:odd").addClass(options.odd)
            
        })
        return this
    }
    
})(jQuery)

 

• 引用

<script>
	$("table").table({
		"even":"even",
		"odd":"odd"
	})
</script>

 

• 效果图