table表格中偶数行添加背景问题

最新推荐文章于 2021-11-10 09:15:41 发布
最新推荐文章于 2021-11-10 09:15:41 发布
阅读量650 收藏
点赞数
分类专栏： CSS样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35283993/article/details/105455665
版权

真是醉了，
本来table想要实现偶数行不同背景色的添加，结果使用：nth-child或者：nth-of-type,但是添加css样式之后，出现的作用在了偶数列，而不是行!!
在这里插入图片描述
就很纳闷，发现问题竟然是tr：nth-child的tr与冒号之间习惯性的添加了一个空格，然后作用位置就变成列了，原来是css属性掌握不够。结合百度看到的文章理解应该是，没有空格针对的是tr元素偶数变色，带空格后针对的是tr属性下的子元素也就是td的偶数变色

柴火棒_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使表格的奇数（偶数）行变色
weixin_34318272的博客
06-06 592
为了让表格中的行更加突出，条理更加清晰，我们可以对其中的奇数或者偶数行添加背景色 <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery test</title> <script src="jquery-1.11.1.min.js...
CSS-相关练习1-表格实现奇数行和偶数行自行判断设置不同的背景颜色
晴天下的大头娃娃
11-25 6694
题目要求：代码部分： /* *Copyright (c) 2017，烟台大学计算机学院 All rights reserved. *文件名称：关于HTML的练习 *作 者：张晴晴 *完成日期：2017年11月11日 *版 本 号：v1.0 * *问题描述：HTML5-JavaScript *输入描述： 无 *程序输出： 无 */
表格中奇数行和偶数行使用不同颜色的背景样式
banying5965的博客
07-12 2012
/* 偶数行背景使用样式： */ table tr:nth-child(even){ background:cadetblue; } /* 奇数行背景使用样式： */ table tr:nth-child(odd){ background:darkslategray; } 转载于:https://www.cnblogs.com/Ian-webe...
如何让表格的奇数行和偶数行具有不同的背景颜色
silenceRR的专栏
10-14 2833
aaabbb     aaabbb    aaabbb    aaabbb    aaabbb    aaabbb                   var   a = document.all.tab1.getElementsByTagName("tr");     for   (var   i=0;  i   {          a[i].style.bac
nth-child()伪类选择器实现奇偶行背景色样式
柠夏
11-10 1176
CSS 伪类(Pseudo-classes) 今天首要讲解一下，怎么用CSS伪类选择器实现奇偶行背景色样式 奇偶匹配 :nth-child(odd)与 :nth-child(even) 分别匹配序号为奇数与偶数的元素。 奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。 废话不多说，上代码诠释： <!DOCTYPE html> <html lang="en"> <head> <meta charse
jquery css 设置table的奇偶行背景色示例
12-09
在网页设计中，经常需要对表格（table）的行进行美化，其中一种常见的方法是为奇偶行设置不同的背景色，以提高可读性和视觉效果。这个示例讲解了如何使用jQuery和CSS来实现这一功能。 首先，我们需要理解CSS部分。...
jQuery实现表格奇偶行显示不同背景色 就这么简单
10-20
在网页设计中，为了提升用户体验，常常需要对表格（table）的行进行美化，使得奇偶行显示不同的背景色。这样做不仅可以使表格看起来更整洁，还可以帮助用户更快地定位到同一行的数据。jQuery 提供了一个非常简洁高效...
表格奇数偶数行条纹效果（jQuery）
05-07
为了解决这个问题，"表格奇数偶数行条纹效果"被广泛采用，它通过交替颜色的方式使表格更加清晰易读。本教程将深入探讨如何使用jQuery 1.5版本实现这一效果，同时也会讲解如何在鼠标悬停和点击时改变行的背景色，增强...
table行随鼠标移动变色示例
09-04
`.tr_odd` 和 `.tr_even` 分别用于给奇数行和偶数行添加不同的背景色，实现常见的“斑马线”效果。`.mouse_color` 类用于定义鼠标悬停时单元格的背景色。同时，`#tab` 选择器设置了表格的边框、对齐方式、宽度和高度...
js处理表格对table进行修饰
10-25
接着，在JavaScript中，获取表格（table）的DOM节点，然后遍历所有行（rows），通过模运算（%）判断行号，奇数行添加`.one`类，偶数行添加`.two`类。最后，将`trcolor`函数绑定到`window.onload`事件，确保在页面...
table 奇偶行背景色 鼠标移动行颜色变化
学习点滴
11-03 486
//设置table中偶数行的背景色 $("#tableID tr:nth-child(even)").css({"background-color":"#E4F5FF"}); //绑定事件当鼠标放到元素上背景颜色， 以及鼠标移开时背景颜色（会根据奇偶行判断设置不同的背景色） $("#tableID tr").mouseover(function()...
CSS3设置Table奇数行和偶数行样式
qq_41692467的博客
08-03 2349
CSS3设置Table奇数行和偶数行样式 table： .myTable tr:nth-child(even){ //偶数行 background:#fff; } .myTable tr:nth-child(odd){ //奇数行 background:#f5f2eb; } ul列表： #Ulist li:nth-of-type(odd){ margin-left: 20px;}奇数行 #Ulist li:nth-of-type(even){margin-left
layui设置table的各种背景色
09-07 1万+
添加以下内容到指定CSS文件,并引入项目即可生效 /* 偶数行背景色 */ .layui-table[lay-even] tr:nth-child(even) { /* background-color: #aaffaa; */ background-color: #eeffee; } /* 鼠标指向表格时,奇数行背景颜色 */ .layui-table tbody tr:h...
给antd中table表格奇偶行设置不同样式（背景颜色交替）
Afterwade的博客
12-29 6161
今天在写大屏的时候碰到一个需求，需要将table表格展示的数据每一行背景颜色交替，翻阅资料后，完成了这个需求。 如下图： table组件中有个rowClassName属性，让我们可以通过给每一行添加不同的类名然后设置不同行的样式 jsx代码： import React, { Component } from 'react'; import {Layout,Select,Table} from 'antd' import './index.less' const { Option } = Select;
table 选择奇数行，偶数行的方法
深渊的水影
06-25 4380
也是网上查到的，自己在此备份一下！ jquery:   $("tr:odd")   $("tr:even") css:       expression(parentElement.rowIndex%2==0?...);  
JS table布局显示奇数偶数行的颜色
qhx556的专栏
04-17 4750
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">             //        $(function () {         //            $('tr:even:not(#tr1)').css('background-c
php输出table表格奇偶行不同颜色,jQuery实现表格奇偶行显示不同背景色 就这么简单...
weixin_35728089的博客
03-10 548
做表格的时候，经常要让奇偶行显示不同背景色，一来使表格显得更美观，二来使同行数据查找更快捷方便。通常我们是怎么实现的呢？就是在每个tr标签上加css样式。代码如下所示：.odd {background-color:yellow;}.even {background-color:red;}No.10001No.20002No.30003No.40004显示效果：但是假设表格有上百行甚至上千行，同时不...
jquery css 设置table的奇偶行背景色
人生若南柯一梦
12-05 2546
.even{background:#FFF38F;} .odd{background:#FFFFEE;} .selected{background:#FF9900;} $(function(){ $("tr:odd").addClass("odd"); $("tr:even").addClass("even"); });
jquery选择器tr:even获取偶数行、tr:odd 获取奇数行
热门推荐
wzx735481897的博客
06-19 1万+
在jquery中： $('table tr:even')  -> 表示获取一个table 所有的索引为偶数的行， 其中索引index 从0开始算起， 0算偶数！ $('table tr:odd')  ->   表示获取一个table 所有的索引为奇数的行， 其中索引index 从0开始算起， 0算奇数！ Eg： 创建一个有6行数据的表格， 让奇数行的背景色为green，
react antd 中table使用rowClassName实现行样式添加背景色
最新发布
06-08
在 React Ant Design 中，使用 `rowClassName` 属性可以为表格的每一行添加样式。具体实现方法如下： ...最后将该函数作为 `rowClassName` 属性传递给 `Table` 组件，即可实现为表格的每一行添加背景色的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值