用简洁的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 相关文章推荐
javascript下过滤数组重复值的代码
Sep 10 Javascript
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
扩展jQuery 键盘事件的几个基本方法
Oct 30 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
js时间查询插件使用详解
Apr 07 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 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字符编码转换之gb2312转为utf8
2013/10/28 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
JS中的多态实例详解
2017/10/15 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
python访问纯真IP数据库的代码
2011/05/19 Python
Python函数式编程指南(二):从函数开始
2015/06/24 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
python读取大文件越来越慢的原因与解决
2019/08/08 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
初三学习计划书范文
2014/04/30 职场文书
销售求职信范文
2014/05/26 职场文书
校运动会广播稿300字
2014/10/07 职场文书
初中成绩单评语
2014/12/29 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书