首页 > 代码库 > jquery表格隔行变色插件
jquery表格隔行变色插件
//插件代码
;(function($){ $.fn.extend({ "alterBgColor":function(options){ options = $.extend({ "odd":"odd",//偶数行的class "even":"even",//奇数行class "selected":"selected"//被点击行class },options);//传入的class参数替换默认的class设置 console.info(options) $("tbody tr:odd").addClass(options.odd);//偶数行设置class $("tbody tr:even").addClass(options.even);//奇数行设置class $("tbody tr").click(function(){//table行的点击事件 //当前点击行添加selected样式，其他行去除selected样式，end()指的是对象又为$(this)，该行的radio被选中 $(this).addClass(options.selected).siblings().removeClass(options.selected).end().find(":radio").attr("checked",true); }); //页面载入时默认选中行的样式 $("table :radio:checked").closest("tr").addClass(options.selected); return this;//返回this,使方法具有可链性 } })})(jQuery);
样式：
table{ border: 1px gray solid; width: 500px; height: 400px; text-align: center; margin: 0 auto; } .odd{background-color: gainsboro;} .even{background-color: #FFFFEE} .selected{background-color:gold}
html：
<table> <thead> <tr> <th></th> <th>姓名</th> <th>性别</th> <th>暂住地</th> </tr> </thead> <tbody> <tr> <td><input type="radio" name="radio"></td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td><input type="radio" name="radio"></td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td><input type="radio" name="radio"></td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td><input type="radio" name="radio"></td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td><input type="radio" name="radio"></td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td><input type="radio" name="radio"></td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td><input type="radio" name="radio"></td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td><input type="radio" name="radio"></td> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody> </table>
<script>中的代码
$(function(){ $("table").alterBgColor();//调用插件，可以自己制定样式，以"{}"对象参数的方式传递 });
注意：页面需首先引入jquery库
jquery的选择符可能会匹配1个或多个元素，因此，插件必须考虑这些情况。可以在插件内部调用each()方法来遍历匹配元素，然后执行相应的方法，this会依次引用每个dom元素
如下jquery代码所示：
;(function($){ $.fn.extend({ "pluginName" : function(options){ return this.each(function(){ //这里放置插件代码 }); } });})(jQuery);)
jquery表格隔行变色插件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。