用简洁的jQuery方法toggleClass实现隔行换色
156 浏览量
2020-10-25
08:12:21
上传
评论
收藏 34KB PDF 举报
用简洁的用简洁的jQuery方法方法toggleClass实现隔行换色实现隔行换色
主要介绍了用简洁的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");
资源评论
weixin_38507121
- 粉丝: 10
- 资源: 929
最新资源
- 基于HOG和SVM的人脸口罩识别算法matlab代码+说明文档.zip
- 排序实验.cpp
- 二叉树-基于C语言实现的二叉树动态可视化打印.zip
- 9e4b957740da1abcf3772babc8320259e6dba32e.jpg
- u_567203736_1646727498&fm_253&app_138&f_JPEG.jpeg
- u_2243549021_4135333655&fm_253&fmt_auto&app_138&f_JPEG.jpeg
- v2-27052acdaf76c83922770a9caa6b7880_r.jpg
- 使用JavaScript实现的排序二叉树.zip
- 实验8.doc
- 1280.jpeg
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
