奇偶选择器：使用odd和even属性实现表格单双行颜色相间和不同

最新推荐文章于 2021-08-03 20:26:40 发布
最新推荐文章于 2021-08-03 20:26:40 发布
阅读量1k 收藏 5
点赞数
文章标签： javascript python ViewUI
原文链接：http://www.cnblogs.com/nyw1983/p/11290380.html
版权

一、奇偶选择器

      表格在呈现数据的时候我们为了方便观看，而隔行显示不同的颜色，虽然可以用用类选择器 class实现这种效果，但是未免太过麻烦，为了更加简便地表现这种特殊的效果我们需要用到一种特殊的选择器，这就是奇偶选择器。

【class选择器】

  • <style type="text/css">
  • .tr1{background-color:#F5F5F5}
  • .tr2{background-color:#FFFFFF}
  • </style>
  • <table>
  • <tr class="tr1"><td>...</td></tr>
  • <tr class="tr2">
最低0.47元/天 解锁文章
weixin_30735745
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现表格奇偶行显示不同背景色 就这么简单
01-21
做表格的时候，经常要让奇偶行显示不同背景色，一来使表格显得更美观，二来使同行数据查找更快捷方便。通常我们是怎么实现的呢？就是在每个tr标签上加css样式。 代码如下所示： <html> <style type=text/...
用html编写奇偶数表格,重置HTML表格中的奇数/偶数序列
weixin_42099116的博客
06-17 770
3 个答案:答案 0 :(得分：4)CSS中最接近动态值的是计数器，但计数器不能与选择器一起使用。除动态伪类外，选择器主要是静态的。您无法使用CSS设置任意值，这将影响选择器与元素的匹配方式。正如评论中所建议的，使用多个ln -s XcodeDefault.xctoolchain OSX10.10.xctoolchain元素可以更好地表示您的表结构，每个元素对应一个元素。这将还允许您现有的tbod...
Android RecyclerView使用总结（Kotlin）
weixin_44902943的博客
03-31 2941
RecyclerView使用总结（Kotlin）一、前言二、开始1、布局文件2、初始化用到的数据3、recyclerView设置布局管理器4、适配器5、设置点击事件6、下拉刷新，上拉加载更多7、拖拽移动、滑动删除8、适配器完整代码9、含多种item布局的recyclerView三、结尾 一、前言 最近在学kotlin语言，所以写了这个Demo来练手，顺便复习一下RecyclerView的使用。 Demo效果图： 二、开始 1、布局文件 这是Demo的主布局文件，由于使用到一个下拉刷新，上拉加载的开源框
WPF中ListView相关问题，ListView样式和模板，ListView背景颜色交替（奇偶行不同颜色）,ListView标题填充
qq_42057250的博客
11-26 5495
WPF中ListView相关问题，ListView样式和模板，ListView数据绑定 一、ListView样式和模板 ListView的模板由三部分组成，分别为Thumb、GridViewColumnHeader、ListViewItem。其中Thumb在GridViewColumnHeader的模板中，参考以下自定义模板： 1、GridViewColumnHeader <Style TargetType="{x:Type GridViewColumnHeader...
toggleClass( )的使用，奇偶行不同颜色
qq_39822451的博客
04-05 211
<style type="text/css"> .red{ font-size:120%; color:red; } .row_1{ color:red; } .row_0{ color:blue; } </style> //对点击元素的第一个父类进行样式的切换（如...
CSS-伪类和伪元素
Pluto_lei的博客
09-29 193
CSS选择器 CSS 选择器用于定位我们想要给予样 式的 HTML 元素。 一、选择器分类 1.1、元素选择器(标签选择器) p { color: red; } div { color: } 1.2、 ID选择器 <p id=”box”>饥人谷</p> <style> #box { border: 1px solid red; } </style> 1.3、 类选择器 <p class=“box active”>饥人谷&l
Angularjs使用ng-repeat中$even和$odd属性的注意事项
10-20
无可否认angularjs的崛起成为前端很大的福利，最近接到项目，...angularjs最吸引人的地方就是数据的双向绑定和指令了，这篇文章主要介绍了Angularjs中使用ng-repeat的$even和$odd属性的注意事项,需要的朋友可以参考下
jQuery中odd选择器的定义和用法
10-25
主要介绍了jQuery中odd选择器的定义和用法,较为详细的分析了odd选择器的具体功能、定义与使用方法,具有一定的参考借鉴价值,需要的朋友可以参考下
第三十七天学习java
qq_37549781的博客
11-28 111
总结 Spring 通过Spring获取对象的两种方式： 方式一： BeanFactory 懒加载 没获取对象前不会创建对象 方式二： ApplicationContext BeanFactory的子类 迫切加载 没获取对象前前就会创建对象 改成懒加载的方法： xml的beans标签后面加default-lazy-init=“true” beans里面的标签所有都懒加载 单个设置懒加载 lazy-init=“true” 依赖注入 有些时候获取对象时，希望把他的属性配置好，
奇偶选择器
banchi6453的博客
08-21 470
㈠定义及用法 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 n可以是数字、关键词或公式。 ㈡示例1 Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 &...
MPI并行程序编写与调试（奇偶变换排序）
weixin_44238355的博客
07-31 1023
MPI并行程序编写与调试（奇偶变换排序） 一、编写MPI并行计算程序 奇偶排序在多线程进行计算代码如下： 关于奇偶排序这里不做过多描述。 /* * File: mpi_odd_even.c * Purpose: Implement parallel odd-even sort of an array of * nonegative ints * Input: * A: elements of array (optional) * Output:
css奇数偶数选择器_超详细！如何学习 CSS？需要学习哪些知识？
weixin_39585886的博客
11-29 331
很多人想让我给他们推荐有关CSS部分的教程，或者问我如何学习CSS。我也看到很多人对CSS的部分内容感到困惑，一部分原因是由于对语言的过时认识。鉴于CSS在过去几年中发生了相当大的变化，这是一个更新知识的好时机。即使CSS只是你所做工作的一小部分(因为你使用其他技术栈)，CSS是你最终希望在屏幕上显示的结果，所以值得合理去学习。因此，本文旨在概述CSS的关键基础和资源，以便进一步阅读现代CSS开发...
javascript实现动态表格的换行变色
shalousun的专栏
10-08 2487
1.新建一个js文件，例如：table.js function changeTableBg() {     var changeTr = document.getElementById("myTable")             .getElementsByTagName("tr");     for ( var i = 0; i     {         changeTr[i
巧记单词：odd和even
wzwxwc1987的专栏
08-21 6429
odd和even哪个代表奇数？哪个代表偶数？
怎么区分odd和even
weixin_33994444的博客
09-06 1万+
odd[ɒd]和even['iːv(ə)n] 一个表示奇数、一个表示偶数 经常混淆。 一个记住的好方法： odd是3个字母，单数，所以表示奇数 even是4个字母，所以表示偶数 转载于:https://www.cnblogs.com/zc1987/p/3304994.html...
css3 选择器 odd,常用css3选择器
weixin_39566387的博客
08-03 922
12345p{width:40px;margin:8px auto;line-height:40px;border:1px solid gray;text-align:center;font-weight: 700;}X + Y 相邻选择器X + Y : 相邻兄弟选择器 选择匹配Y的元素，且该元素为所匹配X元素后面相邻的位置。.test1+p{background-color:gree...
如何快速区别odd和even
陈戏猿
02-05 1万+
odd，3个字母，3→奇数； even，4个字母，4→偶数。
串口通信校验方式（even，odd，space，mark）UART数据波形分析
热门推荐
u012252959的博客
06-26 1万+
1. even 每个字节传送整个过程中bit为1的个数是偶数个（校验位调整个数） 2. odd 每个字节穿送整个过程中bit为1的个数是奇数个（校验位调整个数） 3. noparity没有校验位 4. space 校验位总为0 5. mark 校验位总为1
使用JSP脚本元素实现表格奇偶行背景色不同。
最新发布
04-28
可以使用JSP脚本元素和CSS来实现表格奇偶行背景色不同。 首先，在JSP页面中定义CSS样式，如下所示： ```html <style type="text/css"> .evenRow { background-color: #f2f2f2; } .oddRow { background-color: #ffffff; } </style> ``` 然后，在JSP页面中使用脚本元素来循环输出表格行，并根据行数奇偶性来添加CSS类，代码如下所示： ```html <table> <% for (int i = 1; i <= 10; i++) { %> <tr class="<%= i % 2 == 0 ? "evenRow" : "oddRow" %>"> <td>Row <%= i %></td> <td>Data <%= i %></td> </tr> <% } %> </table> ``` 在这个例子中，我们使用了一个for循环来输出10行表格，并使用了JSP的表达式语言来输出奇偶行的CSS类名。如果行数是偶数，则添加“evenRow”类；如果行数是奇数，则添加“oddRow”类。 最终的结果是，表格的奇偶行会有不同的背景色。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值