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

前端技术 2023/09/03 JavaScript

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

本文地址：https://www.stayed.cn/item/7280

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案