-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2018-10-09
来源 ：
阅读 1255
评论 0
摘要：本篇教程介绍了jQuery教程 隔行换色jQuery实现，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。
本篇教程介绍了jQuery教程 隔行换色jQuery实现，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。
<
这是HTML代码和jQuery的触发代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="tableChangeColor_byself.css"/>
<script src="../jquery-3.2.1/jquery-3.2.1.js"></script>
<script src="tableChangeColor_byself.js"></script>
<script type="text/javascript">
$(function(){
$("table").alterBgColor().find("th").css("color","red");
});
</script>
</head>
<body>
<table id="table1">
<thead>
<tr>
<th> </th>
<th>姓名1</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>冯七</td>
<td>男</td>
<td>浙江嘉兴</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>马八</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
</body>
</html>
这是jQuery插件的代码：
;(function($) {
$.fn.extend({
//"隔行换色": function(options) {
"alterBgColor": function(options) {
//设置默认值
options = $.extend({
odd: "odd",
/* 偶数行样式*/
even: "even",
/* 奇数行样式*/
selected: "selected" /* 选中行样式*/
}, options);
//$("选择器",上下文); //如果不传第二个参数 默认上下文是 document 从当前文档中 寻找
//this 在当前对象下 寻找 table
$("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‘).prop(‘checked‘, !hasSelected); //2.1.4 需改成prop方法
});
// 如果单选框默认情况下是选择的，则高色.
$(‘tbody>tr:has(:checked)‘, this).addClass(options.selected);
return this; //返回this，使方法可链。
}
});
})(jQuery);
这是其中的CSS样式代码：
table { border:0;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;}
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
