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

今天用一种简洁的方法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>
赞 (0)

相关推荐

  • 用jQuery toggleClass 实现鼠标移上变色

    按钮移上变色效果 复制代码 代码如下: <style> .round-corner-btn { -moz-border-radius:4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; width:200px; height:40px; line-height: 40px; background: green; display:inline-block; color:white; tex

  • jQuery点击改变class并toggle及toggleClass()方法定义用法

    我滴古老风格,废话不多说,贴代码了. <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script> <style

  • jQuery中与toggleClass等价的程序段 以及未来学习的方向

    以下两段jQuery是等价的 1 使用toggleClass实现class值的交替 复制代码 代码如下: $("#in1").click(function(){ $("li").toggleClass("ok2"); }) 2 使用js判断实现class值的交替 复制代码 代码如下: $("#in1").click(function(){ var ok=$("li:first").attr("cl

  • jQuery中toggleClass()方法用法实例

    本文实例讲述了jQuery中toggleClass()方法用法.分享给大家供大家参考.具体分析如下: 此方法对添加或移除匹配元素的一个或多个类进行切换. toggleClass()方法检查匹配元素中指定的类.如果不存在则添加类,如果已设置则删除之.这就是所谓的切换效果. 语法结构一: 复制代码 代码如下: $(selector).toggleClass(class,switch) 如果存在(不存在)就删除(添加)一个类. 参数列表: 参数 描述 class 规定添加或删除的类. 如果需要添加多个

  • jQuery toggleClass应用实例(附效果图)

    jQuery toggleClass应用实例(附效果图)

    1.首先到jQuery官网下载js库,网址为http://jquery.com/ 2.建立一个jQuery示例的项目. 3.将js库放到jQuery示例的项目中. 4.写一个html页面 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head

  • jquery点击改变class并toggle的实现代码

    jquery点击改变class并toggle的实现代码 <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>

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

    今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>隔行换色</title> <script src="js/jquery-1.4.2.min.js"></script> <style type=&quo

  • jQuery使用toggleClass方法动态添加删除Class样式的方法

    本文实例讲述了jQuery使用toggleClass方法动态添加删除Class样式的方法.分享给大家供大家参考.具体分析如下: jQuery通过toggleClass方法动态添加删除Class,一次执行相当于addClass,再次执行相当于removeClass,运行下面的代码点击按钮可以看到文本段落字体在蓝色和黑色间切换 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"&

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

    今天用一种简洁的方法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&

  • jQuery插件实现表格隔行换色且感应鼠标高亮行变色

    jQuery插件实现表格隔行换色且感应鼠标高亮行变色

    js代码:  css代码: 复制代码 代码如下: tr.alt td { background:#ecf6fc; /*这行将给所有的tr加上背景色*/ } tr.over td { background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ }

  • 使用简洁的jQuery方法实现隔行换色功能

    今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下: 复制代码 代码如下: <!DOCTYPE HTML><html><head><meta charset="utf-8"> <title>隔行换色</title>    <script src="js/jquery-1.4.2.min.js"></script>    <style type=&

  • jquery隔行换色效果实现方法

    本文实例讲述了jquery隔行换色效果实现方法.分享给大家供大家参考.具体分析如下: 使用 jquery 来实现隔行换行的效果,简单得就跟吃饭一样.来吧,看看代码到底有多么的简单 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javasc

  • jQuery实现table隔行换色和鼠标经过变色的两种方法

    一.隔行换色 复制代码 代码如下: $("tr:odd").css("background-color","#eeeeee"); $("tr:even").css("background-color","#ffffff"); 或者一行搞定: 复制代码 代码如下: $("table tr:nth-child(odd)").css("background-col

  • 基于Jquery的表格隔行换色，移动换色，点击换色插件

    基于Jquery的表格隔行换色，移动换色，点击换色插件

    效果图:编写JQUERY插件如下: 复制代码 代码如下: ;(function($) { $.fn.extend({ "alterBgColor":function(options){ //设置默认值 option=$.extend({ odd:"odd", even:"even", selected:"selected" },options); //注意这个options 同上面的function(options)中的opt

  • 使用jquery hover事件实现表格的隔行换色功能示例

    jQuery hover事件 hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种"保持在其中"的状态. 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数.当鼠标移出这个元素时,会触发指定的第二个函数.而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持"悬停"状态,而不触发移出事件(修正了使用mouseout事件的一个常

  • JS+CSS实现Li列表隔行换色效果的方法

    本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

  • 怎样在html文档里做隔行换色的多行方法

    既然你都知道是隔行换色了,那就隔行换色就是了.方法很多. 最直接的在每一行的<tr>上直接加bgcolor="red". 用css的话就定义行二个颜色的类.在每一行交替使用这个类就是了.如: tr class="trClass1" tr class="trClass2" New Document table{ width:100%; } .t1{ background:#ff6600; color:black; } .t2{ back

随机推荐