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


Posted in Javascript onMarch 15, 2013

今天用一种简洁的方法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 相关文章推荐
JavaScript入门教程(7) History历史对象
Jan 31 Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
JavaScript严格模式详解
Jan 16 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
详解Vue demo实现商品列表的展示
May 07 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 Javascript
vue 插槽简介及使用示例
Nov 19 Vue.js
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 #Javascript
JavaScript 函数replace深入了解
Mar 14 #Javascript
JS异常处理的一个想法(sofish)
Mar 14 #Javascript
JQuery 中几个类选择器的简单使用介绍
Mar 14 #Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 #Javascript
document.createElement()用法
Mar 13 #Javascript
js获得鼠标的坐标值的方法
Mar 13 #Javascript
You might like
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
PHP自定义函数收代码
2010/08/01 PHP
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
js 分栏效果实现代码
2009/08/29 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
python计算一个序列的平均值的方法
2015/07/11 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
服务行业个人求职的自我评价
2013/12/12 职场文书
小学开学寄语
2014/01/19 职场文书
伦敦奥运会口号
2014/06/13 职场文书
建筑节能汇报材料
2014/08/22 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
代办出身证明书
2014/10/21 职场文书
2014年医务科工作总结
2014/12/18 职场文书