用简洁的jQuery方法toggleClass实现隔行换色


Posted in Javascript onOctober 22, 2014

今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>隔行换色</title>
<script src="js/jquery-1.4.2.min.js"></script>
<style type="text/css">
body,table,td, {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.h {
background:#f3f3f3;
color:#000;
}
.c {
background:#ebebeb;
color:#000;
}
</style>
</head>

<body>
<div id="aaa">
<form>
<table id="table" width="50%" border="0" cellpadding="3" cellspacing="1">
<tr>
<td width="30" align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td>
<td>蓝枫前端</td>
<td>蓝枫前端</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td>
<td>蓝枫前端</td>
<td>蓝枫前端</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td>
<td>蓝枫前端</td>
<td>蓝枫前端</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td>
<td>蓝枫前端</td>
<td>蓝枫前端</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td>
<td>蓝枫前端</td>
<td>蓝枫前端</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td>
<td>蓝枫前端</td>
<td>蓝枫前端</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td>
<td>蓝枫前端</td>
<td>蓝枫前端</td>
</tr>
</table>
</form>
</div>
<script>

第一种比较复杂的方法:

$(function()
{
$("#table tr").hover(function()
{
$(this).addClass("h");
},function()
{
$(this).removeClass("h");
})
$("input").click(function()
{
if($(this).attr("checked"))
{
$(this).closest("tr").addClass("c");
}
else
{
$(this).closest("tr").removeClass("c");
}
})
})

第二种比较简单的方法:

toggleClass() 对设置或移除被选元素的一个或多个类进行切换。

该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果。

不过,通过使用 "switch" 参数,您能够规定只删除或只添加类。

$(function(){
$("#table tr").hover(function(){
$(this).toggleClass("h");
})

$("input").click(function(){
var d = $(this);
d.closest('tr').toggleClass("c",d.attr("checked")) ;
})
})
</script>
</body>
</html>
Javascript 相关文章推荐
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 Javascript
利用Angularjs和bootstrap实现购物车功能
Aug 31 Javascript
关于List.ToArray()方法的效率测试
Sep 30 Javascript
深入学习Bootstrap表单
Dec 13 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
w3c编程挑战_初级脚本算法实战篇
Jun 23 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
Typescript类型系统FLOW静态检查基本规范
May 25 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 #Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 #Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 #Javascript
js实现select跳转功能代码
Oct 22 #Javascript
Javascript原型链和原型的一个误区
Oct 22 #Javascript
Javascript this 关键字 详解
Oct 22 #Javascript
Javascript 构造函数详解
Oct 22 #Javascript
You might like
php下使用无限生命期Session的方法
2007/03/16 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
js实现自定义路由
2017/02/04 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
Python 线程池用法简单示例
2019/10/02 Python
基于python plotly交互式图表大全
2019/12/07 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
小学生自我评价范例
2013/09/24 职场文书
园林施工员岗位职责
2013/12/11 职场文书
教育学习自我评价
2014/02/03 职场文书
九年级政治教学反思
2014/02/06 职场文书
《青海高原一株柳》教学反思
2014/04/25 职场文书
计算机网络专业求职信
2014/06/05 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书
python turtle绘图命令及案例
2021/11/23 Python
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电