表格隔行变色插件

最新推荐文章于 2021-01-26 04:25:44 发布

jingtian678

最新推荐文章于 2021-01-26 04:25:44 发布

阅读量452

点赞数 1

分类专栏： web大前端

本文链接：https://blog.csdn.net/jingtian678/article/details/70339951

版权

web大前端专栏收录该内容

291 篇文章 9 订阅

订阅专栏

html文件

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>隔行变色 </title>
<script src="js/jquery.js"></script>
<script src="jquery.table.1.0.js"></script>
<style>
table
{
margin: 100px auto;
border: 1px solid black;
text-align: center;
width: 500px;
border-collapse:collapse;
}
td,th{border: 1px solid black;line-height: 30px; }
.evenRow1{background: greenyellow;}
.oddRow1{background: blueviolet;}
.currentRow1{background: yellow;}
</style>
</head>
<body>
<table id="tab1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>工资</th>
</tr>
<tr>
<td>赵四</td>
<td>25</td>
<td>女</td>
<td>18000</td>
</tr>
<tr>
<td>谢大脚</td>
<td>22</td>
<td>男</td>
<td>20000</td>
</tr>
<tr>
<td>刘英</td>
<td>27</td>
<td>女</td>
<td>50000</td>
</tr>
<tr>
<td>谢腾飞</td>
<td>27</td>
<td>男</td>
<td>12000</td>
</tr>
<tr>
<td>刘大脑袋</td>
<td>23</td>
<td>男</td>
<td>20000</td>
</tr>
</table>
<script>
$('#tab1').table(
{
evenRowClass:'evenRow1',
oddRowClass:'oddRow1',
currentRowClass:'currentRow1',
eventType0:'click'
}
);
</script>
</body>

</html>

js文件

;(function($)//jquery默认插件开发模板
{
$.fn.table=function(options){
var defaults={
//各种参数，各种属性
evenRowClass:'evenRow',
oddRowClass:'oddRow',
currentRowClass:'currentRow',
eventType0:'mouseover',
eventType1:'mouseout'
}
var options=$.extend(defaults,options);//对象合并
this.each(function(){
//实现功能的代码
var _this=$(this);//缓存this
_this.find('tr:even').addClass(options.evenRowClass);
_this.find('tr:odd').addClass(options.oddRowClass);
$('tr').bind(options.eventType0,function(){//绑定事件
$(this).addClass(options.currentRowClass);
});
$('tr').bind(options.eventType1,function(){
$(this).removeClass(options.currentRowClass);
});
});
}
})(jQuery)