- 导包
<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>
- 效果图