jquery示例四给奇数偶数行添加不同的样式，点击全选事件，反选事件

最新推荐文章于 2020-12-20 14:32:17 发布

水莲

最新推荐文章于 2020-12-20 14:32:17 发布

阅读量358

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_44374239/article/details/107880453

版权

这篇博客介绍了如何使用jQuery为表格的奇数行和偶数行添加不同的样式，同时讲解了如何实现点击按钮进行全选和反选事件的功能。通过示例代码展示了具体的实现过程。

摘要由CSDN通过智能技术生成

jquery
给奇数偶数行添加不同的样式
点击全选，反选

效果图

在这里插入图片描述


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery1.11.3.min.js" ></script>
		<script>
			
			
			$(function(){
   
				
						//偶数行
			$("tr:even").css({
   background:'pink'})
		//奇数行
			$("tr:odd").css({
   bac

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

水莲

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery示例四给奇数偶数行添加不同的样式，点击全选事件，反选事件

jquery给奇数偶数行添加不同的样式点击全选，反选效果图<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery1.11.3.min.js" ></script> <script>
复制链接

扫一扫

jquery实现表格奇数偶数行不同样式(有图为证及实现代码)

10-27

表格奇数偶数行不同样式,相信很多网友都想试试手吧，由于经验上千所以只能半途而废，为了响应网友的心声，本文整理了一些操作技巧，有图为证，感兴趣的朋友可以了解下哦

jquery 设置表格奇偶数的颜色和行被选中的颜色样式

kaka1001的博客

03-08

361

jquery 代码 $(funtion(){ //设置偶数行和奇数行 $("tbody>tr:odd").addClass("ou"); //为奇数行设置样式(添加样式类) $("tbody>tr:even").addClass("dan"); // 为偶数行设置样式类 $("tbody>tr:has(:checked)").addClass("ed

参与评论您还未登录，请先登录后发表或查看评论

如何用jquery控制表格奇偶行及活动行颜色

年华

08-10

453

先定义好表格的奇偶行样式，如下代码： body { font-size:12px; } th { color: #FFFFFF; background: #A172AC; } table,table td,table th { padding: 0.5em; margin: 0; border:0; border-spacing:0

用jquery技术实现table的奇数行变色

东方势力的博客

10-13

1905

完整代码： .red2 { background: #eeeeee; } $(function(){ //查询按钮 //奇数航变色 $("#table1 tr:even").addClass("red2"); }); 员工ID

Jquery 1.42 checkbox 全选和反选代码

10-29

接下来，我们需要在页面加载完成后为全选/反选按钮（标签id为`lbl`）绑定点击事件，当用户点击时调用`Checked`函数： ```javascript $(document).ready(function(){ // 绑定click事件 $("#lbl").bind("click", ...

vue2.0在table中实现全选和反选的示例代码

08-28

使用 `v-on` 指令来绑定 Checkbox 的点击事件，并在点击事件中实现全选和反选的逻辑。知识点 3: 使用 LocalStorage 存储页面信息在示例代码中，我们可以看到使用 LocalStorage 来存储页面信息。使用 `...

jQuery实现checkbox列表的全选、反选功能

11-26

我们在做列表的时候经常会遇到全选，反选进行批量处理问题，例如：　我当时就是简单的实现了，然后想封装到公共的js中，封装的太烂，不好意思贴出来了（就是把实现代码之间放到公共js中，然后每个页面都用固定的id...

jquery实现简单的全选和反选功能

10-23

我们在做项目的时候，经常需要实现全选和反选功能，到网上搜了一圈，发现网上写的全选的代码，不是完整的，是有bug的。下面结合自己的项目给大家分享下。

jquery实现全选、反选、获得所有选中的checkbox

11-26

举了7个不同的checkbox状态，和大家一一分享。 1、全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2、取消全选（全不选） $("#btn2").click(function(){ $("input...

jq匹配偶数行_jquery实现表格奇数偶数行不同样式(有图为证及实现代码)

weixin_39868248的博客

12-20

175

非侵入实现，控制更方便效果图：javascript practicetable{width:300px;}caption{background:#DCA;}th{background:#FCA;width:50%;}td{text-align:center;}$(document).ready(function(){odd= {"background":"#EDA","color":"#3F5"...

JQ奇偶选择

weixin_43805971的博客

06-28

582

$("table tr:even").click(function(){ console.log("选择奇数行") //表示获取一个table 所有的索引为偶数的行，其中索引index 从0开始算起， 0算偶数！ }) $("table tr:odd").click(function(){ console.log("选择偶数行") //表示获取一个table 所有的索引为奇数的行，其中索引index 从0开始算起， 0算奇数！ }) ...

JQ选择器详解

小屋博客

12-02

1442

一、什么是jq jq就是人家把js的函数封装好的一个库。二、为什么要用jq 1、简化了js的复杂操作 2、无需在去关心兼容性问题（最爽的一点） 3、提供了大量的使用方法三、jq的选择器 1、基本选择器 #id：通过元素的 id 属性中给定的值 $("#myDiv"); element ：指向 DOM 节点的标签名$("div"); .class 一个元素可以有多个类，只

jq匹配偶数行_jQuery 顺便学习下CSS选择器奇偶匹配nth-child(even)

weixin_39810441的博客

12-20

140

今天学习jQuery,看到nth-child(even)用法，特意找了下这个选择器的用法,在CSS3标准中，用法很强大。对此，我把CSS3标准中nth-child()用法大致介绍下：CSS3伪类选择器：nth-child()简单的归纳下nth-child()的几种用法。第一：nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。(EG) li:nth...

jq 判断li是奇偶数时添加不同class

❤❤❤

10-11

2574

javascript的奇怪的问题，鼠标点击偶数次触发事件，单数次不触发事件

fox_lht的专栏

07-17

2790

编写前台页面的javascipt代码时遇到的奇怪问题，排查了几个小时，一开始抓不到头绪，后来跟踪javascipt代码时，发现该事件被累计触发了，所以一次灵光、一次不灵光，仔细研究代码，发现，每次处理过程中，javascript程序都会在它的父节点注册一回该事件，虽然每次触发时，该元素都被删除了，但是它的父节点记录了该事件，重新出现该元素时，该事件都累计触发，因而造成时灵时不灵的情况。解决方法

jquery选择器tr:even获取偶数行、tr:odd 获取奇数行

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交

jquery示例四 给奇数偶数 行添加不同的样式，点击 全选事件，反选事件

“相关推荐”对你有帮助么？

jquery示例四给奇数偶数行添加不同的样式，点击全选事件，反选事件