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

最新推荐文章于 2022-06-22 10:14:36 发布
最新推荐文章于 2022-06-22 10:14:36 发布
阅读量1.7w 收藏 10
点赞数 3
分类专栏： javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wzx735481897/article/details/73466075
版权

在jquery中：

$('table tr:even')  -> 表示获取一个table 所有的索引为偶数的行， 其中索引index 从0开始算起， 0算偶数！

$('table tr:odd')  ->   表示获取一个table 所有的索引为奇数的行， 其中索引index 从0开始算起， 0算奇数！


Eg：

创建一个有6行数据的表格， 让奇数行的背景色为green， 偶数行的字体色为red，代码如下：

1. 导入jquery。

   2. 创建表格。

   3. 编写脚本。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js" ></script>
</head>
<body>
<table border="1px" cellspacing="0" cellpadding="10">
<tr><td>AA</td><td>BB</td><td>CC</td></tr>
<tr><td>AA</td><td>BB</td><td>CC</td></tr>
<tr><td>AA</td><td>BB</td><td>CC</td></tr>
<tr><td>AA</td><td>BB</td><td>CC</td></tr>
<tr><td>AA</td><td>BB</td><td>CC</td></tr>
<tr><td>AA</td><td>BB</td><td>CC</td></tr>
</table>

<script type="text/javascript">
$("table tr:even").css("background-color","green");
$("table tr:odd").css("color","red");
</script>
</body>
</html>

吴泽雄
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jq之$(“tr:odd“).css(“background-color“,“red“)；
wanggang182007的博客
01-19 375
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jq之demo</title> <!--线上jq库--> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script>.
jquery选择器之基本过滤选择器详解
10-26
jQuery选择器是jQuery库中的核心功能之一，它极大地简化了在JavaScript中操作DOM元素的方式。在jQuery中，过滤选择器是一种特殊的选择器，用于从已选中的元素集合中进一步筛选出满足特定条件的元素。本篇文章将深入...
jquery怎么设置表格奇偶行不同的颜色？
qq_45991812的博客
06-22 1481
在jQuery中使用“$("tr:odd").css("background-color","颜色")”与“$("#tr:even").css("background-color","颜色")”即可设置表格奇偶行颜色不同。
选择器tr获取奇数偶数行
花伤情犹在的博客
06-11 821
jQuery： <script type="text/javascript"> $("table tr:even").css("background-color","green"); $("table tr:odd").css("background-color","red"); </script> JavaScript： <script type="text/javascript"> window.onload=function(){ var oLis=docu.
jq匹配偶数行_JQuery选择器获取奇数行，偶数行
weixin_39894778的博客
12-20 1711
在jquery中：$('table tr:even') -> 表示获取一个table 所有的索引为偶数的行， 其中索引index 从0开始算起， 0算偶数！$('table tr:odd') -> 表示获取一个table 所有的索引为奇数的行， 其中索引index 从0开始算起， 0算奇数！Eg：创建一个有6行数据的表格， 让奇数行的背景色为green， 偶数行的字体色为red...
jquery 选择奇偶行。
IT技术宅-北方的刀郎
03-21 1074
//从0开始的。0为偶数行$("#ny_ques li:odd").addClass('double');//$("#ny_ques li:even").addClass('double');
$("tr:even")和$("tr:odd")
qq_41700374的博客
11-11 1981
$("tr:even")：选取偶数位置的 &lt;tr&gt; 元素，注意下标从0开始； $("tr:odd")：选取奇数位置的&lt;tr&gt;元素，注意下标从0开始。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &am
jQuery的选择器中的通配符使用介绍
10-26
例如，`$("tbody tr:even")`会选取表格体内的偶数行，`$("tbody tr:odd")`则选取奇数行。 3. **获取子节点** - `children()` 方法：`jqueryObj.children("input").length`将返回`jqueryObj`下一级中`<input>`标签...
常用jQuery选择器总结
10-25
jQuery选择器是jQuery库的核心功能之一，用于高效地定位并操作网页中的DOM元素。通过使用jQuery选择器，开发者可以轻松地选取需要的HTML元素，并执行一系列的DOM操作，如添加样式、修改内容或绑定事件等。 1. **...
jQuery实现表格奇偶行显示不同背景色 就这么简单
01-21
做表格的时候，经常要让奇偶行显示不同背景色，一来使表格显得更美观，二来使同行数据查找更快捷方便。通常我们是怎么实现的呢？就是在每个tr标签上加css样式。 代码如下所示： <html> <style type=text/...
jQuery选择器简明总结（含用法实例,一目了然）
10-26
- `:even`：选取索引为偶数的元素，`$("tr:even")`选取偶数行的`<tr>`元素。 - `:odd`：选取索引为奇数的元素，`$("tr:odd")`选取奇数行的`<tr>`元素。 - `:next`：选取紧跟在指定元素后的同级元素，`$('.item')....
jq之$(“tr:even“).css(“background-color“,“yellow“)
wanggang182007的博客
01-19 153
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jq之demo</title> <!--线上jq库--> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script>.
jq匹配偶数行_Table tr 奇数偶数行渐变色Jquery实现
weixin_39607865的博客
12-20 220
Table tr 奇数偶数行渐变色Jquery实现时间：5年前作者：庞顺龙浏览：539[站内原创，转载请注明出处]奇数行换色function rowColor() {//处理列表行渐变颜色 奇数行换色$(".table tr").mouseover(function () {$(this).addClass("s2hover");$(".table tr:nth-child(2n)").addCl...
$("tr:even")--even选择器：选中偶数index值元素
jiajia199470的博客
11-04 591
定义和用法 :even 选择器选取每个带有偶数 index 值的元素（比如 2、4、6）。 index 值从 0 开始，所有第一个元素是偶数 (0)。 最常见的用法：与其他元素/选择器一起使用，来选择指定的组中偶数序号的元素（如上面的例子）。 $("tr:even")
j2ee23：jquery：使用jquery技术实现奇数行偶数行换色
飞天小神猪
02-03 564
第一：概念 使用jquery技术实现奇数行偶数行换色ajax：把响应返回给客户端的时候需要dom树的思想写1.jquery是一个javascript的框架（也就是他完成了功能，只需要导入js文件并调用），对原始的javascript代码的封装2.jquery的应用：实现对dom树对象的封装，将dom对象（dom树中的每个节点）封装成jquery对象。封装了javascript的代码（例如将d...
jQuery :even
weixin_30384217的博客
01-24 93
此选择器匹配所有索引值为偶数的元素，从0开始计数。 jQuery1.0版本添加。 语法结构: jQuery( ":even" ) 代码实例: <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="htt...
选tr偶数行_CSS3:nth-child()伪类选择器，Table表格奇偶数行定义样式
weixin_34024555的博客
02-12 720
Table表格奇偶数行定义样式:CSS3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，CSSer们只有望洋轻叹。虽 然如此，但有前瞻性的我们，又怎能停步不前呢？今天我们就来“前瞻”一下CSS3的一个...
tr:even 与tr:odd
weixin_30642029的博客
10-28 198
:even匹配所有索引值为偶数的元素，从 0 开始计数查找表格的1、3、5...行（即索引值0、2、4...）<table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2...
jq匹配偶数行_jQuery中两种奇偶选择器的区别
weixin_39683176的博客
12-20 324
原标题：jQuery中两种奇偶选择器的区别jQuery中的选择器在选择元素的时候经常用到， 今天主要介绍jQuery中的奇偶选择器！jquery中的奇偶选择器要用到CSS3伪类选择器：nth-child()nth-child() 的用法直接匹配元素 如 nth-child(number)jquery :even选择器选择每个相隔的(偶数)元素:even 选择器选取每个带有偶数 index 值的元素...
jquery选择器:nth-child()
最新发布
07-16
jQuery选择器中的`:nth-child()`伪类可以用来选择某个父元素下的特定子元素。它基于子元素在父元素中的位置进行选择。以下是几个示例： 选择第n个子元素： ```javascript $(document).ready(function(){ // 选择第3个子元素 $('ul li:nth-child(3)').css('color', 'red'); }); ``` 在上述示例中，`ul li:nth-child(3)`选择器将选择`ul`元素下的第3个`li`子元素，并将其文字颜色设置为红色。 选择特定位置的子元素： ```javascript $(document).ready(function(){ // 选择偶数位置的子元素 $('ul li:nth-child(even)').css('background-color', 'yellow'); // 选择奇数位置的子元素 $('ul li:nth-child(odd)').css('background-color', 'green'); }); ``` 在上述示例中，`:nth-child(even)`选择器将选择偶数位置的子元素，而`:nth-child(odd)`选择器将选择奇数位置的子元素，并分别将它们的背景颜色设置为黄色和绿色。 你还可以使用`:nth-child()`伪类与其他选择器组合使用，以更精确地选择子元素。注意，`:nth-child()`伪类中的索引是从1开始计数的。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值