1.下载jQuery，并导入：https://blog.csdn.net/weixin_44718300/article/details/88746796

2.代码实现：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script type="text/javascript" src="../js/jquery-3.3.1.js.css" ></script>

		<!--

			1. 导入JQ的包

			2. 文档加载完成函数: 页面初始化

			3. 获得所有的行 :   元素选择器

			4. 根据行号奇数/偶数去修改颜色

		-->

		<script>

			$(function(){

				//获得所有的行 :   元素选择器

				$("tbody > tr:even").css("background-color","#CCCCCC");

				//修改基数行

				$("tbody > tr:odd").css("background-color","#FFF38F");

//				$("tbody > tr").css("background-color","#FFF38F");

			});

			/*

			 表格全选和全不选

			 进一步确定事件: 点击事件

			 */

			$(function(){

				//绑定点击事件

				//this 代表的是当前函数的所有者

				$("#checkAll").click(function(){

					//获取当前选中状态

//					alert(this.checked);

					//获取所有分类项的checkbox

					// 选择器[属性名称='属性值']

//					$("input[type='checkbox']:gt(0)").prop("checked",this.checked);

					//使用层级选择器来实现  tbody > tr > td > input

				//	$("tbody > tr > td > input").prop("checked",this.checked);  //这个可行

				//	#tab > tbody > tr:nth-child(4) > td:nth-child(1) > input[type="checkbox"]

					$("input").prop("checked",this.checked);

				});

			});

		</script>

	</head>

	<body>

		<table border="1px" width="600px" id="tab">

			<thead>

				<tr >

					<td>

						<input type="checkbox" id="checkAll" />

					</td>

					<td>分类ID</td>

					<td>分类名称</td>

					<td>分类商品</td>

					<td>分类描述</td>

					<td>操作</td>

				</tr>

			</thead>

			<tbody>

				<tr>

					<td>

						<input type="checkbox" />

					</td>

				<td>1</td>

				<td>手机数码</td>

				<td>华为,小米,尼康</td>

				<td>黑马数码产品质量最好</td>

				<td>

					<a href="#">修改</a>|<a href="#">删除</a>

				</td>

			</tr>

			<tr>

				<td>

					<input type="checkbox" />

				</td>

				<td>2</td>

				<td>成人用品</td>

				<td>充气的</td>

				<td>这里面的充气电动硅胶的</td>

				<td><a href="#">修改</a>|<a href="#">删除</a></td>

			</tr>

			<tr>

				<td>

					<input type="checkbox" />

				</td>

				<td>3</td>

				<td>电脑办公</td>

				<td>联想,小米</td>

				<td>笔记本特卖</td>

				<td><a href="#">修改</a>|<a href="#">删除</a></td>

			</tr>

			<tr>

				<td>

					<input type="checkbox" />

				</td>

				<td>4</td>

				<td>馋嘴零食</td>

				<td>辣条,麻花,黄瓜</td>

				<td>年货</td>

				<td><a href="#">修改</a>|<a href="#">删除</a></td>

			</tr>

			<tr>

				<td>

					<input type="checkbox" />

				</td>

				<td>5</td>

				<td>床上用品</td>

				<td>床单,被套,四件套</td>

				<td>都是套子</td>

				<td><a href="#">修改</a>|<a href="#">删除</a></td>

			</tr>

			</tbody>

		</table>

	</body>

</html>

jQuery表格隔行换色和全选的实现的更多相关文章

  1. 原生js实现音乐列表（隔行换色、全选）

    一.实现原理: 1.使用 % 运算符实现各行换色,规律:当%前面的值和后面的值相同时  结果为0: 2.使用开关思想,实现在同一个元素上反复点击时的条件判断,并且把开关以属性方式绑定在每个元素上: 3 ...

  2. JQuery 表格 隔行换色 和鼠标滑过的样式

    $(document).ready(function () { $(".Pub_TB tbody tr:even td").css("background-color&q ...

  3. JS隔行换色和全选的实现

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. JS实现自定义工具类，隔行换色、复选框全选、隔行高亮等

    很多功能都可以放在js的工具类中,在使用的时候直接调用 本次实现的功能包括: /** 0.当点击表的整行的任意位置时,第一列的复选框或者单选框均选中  1.隔行换色 2.复选框的全选效果 3.实现表格 ...

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

    jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...

  6. JQuery案例一：实现表格隔行换色

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. jQuery应用实例2：表格隔行换色

    这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...

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

    实现表格隔行换色,且感应鼠标行变色的方法有很多,在本文将为大家介绍的是使用jQuery插件来实现,具体如下 看代码: : css代码:  

  9. jQuery学习(四)——使用JQ完成表格隔行换色

    1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...

随机推荐

  1. 前端学习笔记系列一：4 vue中@click.native

    .native - listen for a native event on the root element of component. 作用:[给组件绑定原生事件] 例子:如果使用router-l ...

  2. DotNetSpeech----文本转wave语音文件

    wav操作引入dll(DotNetSpeech.dll),引入以后需要选中项目中引入的dll,鼠标右键,选择属性,把“嵌入互操作类型”设置为False.不然会提示无法嵌入互操作类型"Spee ...

  3. Java读取压缩文件信息

    不解压压缩文件,获取其中包含的文件,通过文件名检查是否包含非法文件.(后续再根据文件头或内容吧) zip: import java.util.zip.ZipEntry;import java.util ...

  4. APP自动化测试获取包名的两种方法

    获取包名的两种方法: 一.通过aapt获取 1.进入aapt.exe所在路径 2.在地址栏输入cmd回车,打开dos命令窗口. 3.在命令窗口输入 aapt dump badging 拖入apk 回车 ...

  5. python进阶强化学习

    最近学习了慕课的python进阶强化训练,将学习的内容记录到这里,同时也增加了很多相关知识. 主要分为以下九个模块: 基本使用 迭代器和生成器 字符串 文件IO操作 自定义类和类的继承 函数装饰器和类 ...

  6. js取值问题----key为数字

    今天远程调用一个接口在处理返回的数据的时候突然发现数组的Key是一个数字 然后如果继续用“.”的话是不会的,会报错 要用中括号就可以解决

  7. 01.DesignParttern设计模式，简单工厂，工厂方法，抽象工厂三大工厂的区别与联系

                工厂用来生产对象,对象具有方法和属性. 简单工厂的缺点(简单工厂并不是23中设计模式): 工厂类的职责相对过重,增加新的产品,需要修改工厂类的判断逻辑,违背开闭原则: JDK源 ...

  8. 用 Weave Scope 监控集群【转】

    创建 Kubernetes 集群并部署容器化应用只是第一步.一旦集群运行起来,我们需要确保一起正常,所有必要组件就位并各司其职,有足够的资源满足应用的需求.Kubernetes 是一个复杂系统,运维团 ...

  9. C++面试常见问题——14内存管理

    内存管理 内存管理由三种方式: 自动存储 静态存储 动态存储 自动存储 对于函数的形参.函数内部变量.和结构体变量等,编译器在函数运行过程中在栈中自动对其分配内存,调用结束后对其进行销毁.变量的声明周 ...

  10. 01.swoole学习笔记--TCP服务器

    1.安装swoole扩展 2.网络调试助手进行调试 <?php //创建服务器 $host='192.168.10.31'; $port=; //$model='SWOOLE_PROCESS'; ...