jQuery表格隔行换色和全选的实现
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表格隔行换色和全选的实现的更多相关文章
- 原生js实现音乐列表（隔行换色、全选）
一.实现原理: 1.使用 % 运算符实现各行换色,规律:当%前面的值和后面的值相同时 结果为0: 2.使用开关思想,实现在同一个元素上反复点击时的条件判断,并且把开关以属性方式绑定在每个元素上: 3 ...
- JQuery 表格 隔行换色 和鼠标滑过的样式
$(document).ready(function () { $(".Pub_TB tbody tr:even td").css("background-color&q ...
- JS隔行换色和全选的实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS实现自定义工具类，隔行换色、复选框全选、隔行高亮等
很多功能都可以放在js的工具类中,在使用的时候直接调用 本次实现的功能包括: /** 0.当点击表的整行的任意位置时,第一列的复选框或者单选框均选中 1.隔行换色 2.复选框的全选效果 3.实现表格 ...
- jQuery实现表格隔行换色且感应鼠标高亮行变色
jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...
- JQuery案例一：实现表格隔行换色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery应用实例2：表格隔行换色
这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...
- jQuery插件实现表格隔行换色且感应鼠标高亮行变色
实现表格隔行换色,且感应鼠标行变色的方法有很多,在本文将为大家介绍的是使用jQuery插件来实现,具体如下 看代码: : css代码:
- jQuery学习(四)——使用JQ完成表格隔行换色
1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...
随机推荐
- centos 安装 memcached
centos 安装 memcached 1. 安装依赖: libeventyum install libevent-devel 2. 获取最新版本wget http://memcached.org/l ...
- leetcode743 Network Delay Time
""" here are N network nodes, labelled 1 to N. Given times, a list of travel times as ...
- UVALive 6853（dp）
题意:已知有n个城市,某歌手每月进行一场演唱会,共持续c个月,可连续两个月在同一个城市.城市间的路费已给出,且已知每个城市在第k(1<=k<=c)个月举办演唱会的所得利润,求最终的最大利润 ...
- 编程题目 定义栈的数据类型，请在类型中实现一个能够得到栈最小元素的minx函数。
首先自己用 节点 实现了 栈 这种数据类型 为了实现题目了要求,我使用的两个栈. 一个栈 用来 push pop 用户的数据, 另外一个栈用来存放 最小元素(涉及元素比较) 代码如下: #!/usr/ ...
- OpenWRT飞行计划
openwsn飞行计划 工程wiki http://openwsn-berkeley.github.io/firmware/ 2015-12-30 Openwrt 预备 openwrt 未整理 小神器 ...
- 01.swoole学习笔记--TCP服务器
1.安装swoole扩展 2.网络调试助手进行调试 <?php //创建服务器 $host='192.168.10.31'; $port=; //$model='SWOOLE_PROCESS'; ...
- leetcode303 Range Sum Query - Immutable
""" Given an integer array nums, find the sum of the elements between indices i and j ...
- C# enable为false时不变颜色
[System.Runtime.InteropServices.DllImport("user32.dll ")] public static ex ...
- sql 报错问题
SQLServer数据库密码已过期问题 处理
- 一百零二、SAP中ALV事件之十五，让ALV表格自动求和
一.代码如下 二.运行之后,效果如图,表头多了一个求和符号E,最下面一行会列出求和的相关信息 完美