css如何让表格或者行隔行显示背景颜色，单双交替显示不同的背景颜色

最新推荐文章于 2022-07-14 11:16:01 发布
最新推荐文章于 2022-07-14 11:16:01 发布
阅读量1.3w 收藏 5
点赞数
分类专栏： 经验积累 文章标签： jquery html css
css 如何让表格或者行隔行显示背景颜色，单双交替显示不同的背景颜色
要显示单双行不同颜色除了css可以外，jquery也可以的，而且 2种方法都挺简单的，下面请看jquery显示的方法。
<html>
<head>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("tr:even").css("background","blue");
$("tr:odd").css("background","red");
})
</script>
</head>
<body>
<table >
  <tr>
    <td>aaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
  </tr>
  <tr>
    <td>aaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
  </tr>
  <tr>
    <td>aaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
  </tr>
  <tr>
    <td>aaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
  </tr>
</table>
</body>
</html>
:odd   :匹配所有索引值为奇数的元素，从 0 开始计数.查找表格的2、4、6行（即索引值1、3、5...）

:even  :匹配所有索引值为偶数的元素，从 0 开始计数.查找表格的1、3、5...行（即索引值0、2、4...）


转自：http://blog.sina.com.cn/s/blog_70207ec20101b0wd.html

总结的挺好，归纳的很简洁，很好，收藏

Caster_Saber
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS网页隔行换色技巧
01-19
CSS隔行换色的问题，其实很简单，您可以根据您的需要，采用下面的任何一种方法，当然，要适合你的编码与需求情况：一、background背景图片　　如果行高固定的话，推荐使用背景图，也推荐将行高固定！兼容一切浏览器。二、CSSExpression　　文字：color:[removed]this.sourceIndex%2?’#ff0000′:’#000000′);　　背景：background-color:[removed]this.sourceIndex%2?’#ff0000′:’#000000′);　　注意：本方法浏览器兼容度不够，不支持FF3。三、class分别定义 <ul><li
css如何实现隔行换色
最新发布
百变鹏仔工作室
01-24 1260
上述代码中，为表格中的奇数行和偶数行分别设置了不同的背景颜色，从而实现了隔行换色的效果。选择器来实现隔行换色。该选择器用于匹配父元素中的特定子元素，是两种不同的颜色值，可以根据需要进行修改。在CSS中，可以使用。
css 单双行隔行换色,CSS代码小技巧轻松实现隔行换色
weixin_32126511的博客
08-03 988
以下为引用的内容：www.devdao.com - 四种实现CSS隔行换色的方法function bgChange(){if(!document.getElementsByTagName) return false;var tables = document.getElementsByTagName("table");for(var i=0; ivar odd = false;trs = tabl...
css表格各行颜色交替 tr:nth-child(odd)
小春的博客
09-02 9554
你可以给标题所在行单独设置颜色样式。比如（假定标题在第一个tr标签内）： tr:nth-child(odd) {color:red} //奇数行（从标题行起算，下同）设为红色 tr:nth-child(even) {color:blue} //偶数行设为蓝色 tr:nth-child(1) {color:black} //第一行（标题行）设为黑色 这是标题 这是第1行 这是
css实现表格单双行颜色不同
shufudeyipi的博客
04-01 2058
.table tr:nth-child(odd) { background-color:#bd7064a3; }
用CSS定义表格行背景色交替出现
锋行天下
07-22 2407
应用div+css网页布局，表格的使用已经非常少了，至少table表格只是作为内容数据，并不再作为页面布局的手段。　　表格数据是很常见的数据格式，如产品列表，产品参数，数值等等，有时候表格数据的每一行占据了比较宽的位置，我们往往通过定义行背景色交替，让用户浏览更加的清晰。　　我们可以用CSS定义表格行背景色交替吗？或许你立即就想到了class，用class来定义背景色，然后在不同的行设置不
html5单行背景颜色,css li列表布局隔行背景颜色不同布局实例
weixin_39903571的博客
06-15 578
为了避免影响步骤做调用，让法度模范精练，应用ul li列表构造实现以上距离背风物布局，同时鼠标滑过悬停li上方后盾变色换色，通常有两种门径。第一种：后盾图片，切一窄的竖条靠山图片素材，将背景图片作为ul后台，让配景图片作为ul后台后高下支配平铺，即可轻松完成间隔成效。第二种：应用JQ殊效完成，通过JS特效实现多么间隔后盾色同时鼠标经由过程后盾换色造诣，殊效代码多并须要引人JS文件与代码。此后CSS...
jQuery 行背景颜色的交替显示(隔行变色)实现代码
01-21
//显示单双行显示不同背景色【方法一】： // $(“#UL_id li:even”).attr(“className”,”redClass”); //显示单双行显示不同背景色【方法二】： $(“#UL_id li:even”).addClass(“redClass”); ”UL_id”> 单数...
运用jquery实现table单双行不同显示并能单行选中
10-29
（该方法是对《运用jquery实现（table）单双行不同显示并能多行选中》的改进，适合于单行选择）
li列表隔行不同色CSS设计
09-12
"li列表隔行不同色CSS设计"是一个常见的需求，目的是使列表的每一行在颜色上有所区分，特别是鼠标悬停时，用户可以更清晰地感知到当前所选的行。这通常通过CSS实现，无需依赖JavaScript或其他编程语言。 首先，我们...
css实现表格奇偶行变色
weixin_43535265的博客
03-05 3299
代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .ta{ border-collapse: collapse; border-color: blue; width: 100%; } tr:nth-child(odd){ background-c
html语言对奇偶数行设置颜色,纯CSS实现奇偶数行颜色交替(兼容主流浏览器)
weixin_39765339的博客
06-02 1561
做一张li二倍高的背景图,然后,上半部分PS成奇数行颜色,下半部分PS成偶数行颜色,然后将这张图定义给ul任其平铺.这样一来,纵使有万千行,它也会轻而易举的交替颜色...本文DEMO背景图(1*50):CSS部分:.list {width:500px;margin:0 auto;}.list ul {background:url(http://www.bluebirdsky.cn/images/u...
html div交替颜色,css实现兼容火狐、IE的LI奇偶行颜色交替方法
weixin_39672443的博客
06-21 293
本文实例讲述了css实现兼容火狐、IE的LI奇偶行颜色交替方法。分享给大家供大家参考。具体如下：这是一款兼容火狐、IE的LI颜色交替的方法，实则是平铺的背景，不过相对使用JS，平铺背景也不失为一种好方法，因为处理一个GIF图像也不是什么难办的事，最其码比使用JS的要兼容性好许多，你可以在不同的浏览器下试一下。运行效果截图如下：在线演示地址如下：具体代码如下：复制代码代码如下:/p>"http...
CSS基础样式
weixin_47782618的博客
04-05 510
1. 背景属性 1.1 background-color：设置背景颜色 值 说明 color 颜色值 transparent 默认值，透明 inherit 从父元素继承 1.2 background-image：设置背景图像 值 说明 url("url") 图像的url none 默认值，没有背景图像 inherit 从父元素继承 1.3 background-repeat：平铺背景图像的方式 值 说明 rep
HTML-表格的奇数偶数行颜色不同
热门推荐
晴天下的大头娃娃
11-05 2万+
/* *Copyright (c) 2017，烟台大学计算机学院 All rights reserved. *文件名称：关于HTML的练习 *作 者：张晴晴 *完成日期：201711月5日 *版 本 号：v1.0 * *问题描述：HTML5的新特性 *输入描述： 无 *程序输出： 无 */ 10-25 work body{ background-color:
html表格某一行背景颜色设置,HTML表格行背景颜色与浮动属性不一样
weixin_32955455的博客
06-11 2195
我的表具有像Name = Value这样的列对。为了清晰视觉，包含名称的“td”元素被设置为float：right。但是这打破了偶数/奇数背景色的CSS规则。我想与类DK_name td完全完全填充在另一个CSS规则中定义的背景色...HTML表格行背景颜色与浮动属性不一样任何想法如何解决这个问题？在此先感谢...CSS：table{font-family:"Lucida Console",Mon...
html语言单个单元格背景颜色,html – CSS表中第一行和第一列的每个单元格的背景颜色不同...
weixin_28856717的博客
05-30 427
您可以修改第一列中每个单元格的颜色,而无需修改HTML,方法是将tr上的nth-child和td上的first-child组合在一起,如下所示：table.agenda tr:nth-child(1) td:first-child {background: rgb(16,20,50);color: white;}table.agenda tr:nth-child(2) td:first-child...
jquery针对单双行显示不同背景颜色
weixin_43862596的博客
05-10 238
//根据单双行显示不同背景色 $(’#table tr:even’).css(‘backgroundColor’,’#E8E6E1’); 或 jQuery("#table").find(“tr:even”).css(“background-color”, “#e8e8e8”); jQuery("#table").find(“tr:odd”).css(“background-color”, “”); odd:单行 even:双行 ...
表格css样式 ——表格背景，隔行变色，触摸表格变色
LiHang1234567777的博客
07-14 2442
我来给大家讲解一下代码如下（示例）：首先：先写一个表格 序号 商品名称 单价/元 数量 商品名称 单价/元 ...
html表格，显示单双行，单行为蓝色，双行为黄色
04-01
请参考以下代码： ```html <!DOCTYPE html> <html> <head> <title>HTML表格显示单双行不同颜色</title> <style type="text/css"> table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border: 1px solid #ddd; } tr:nth-child(even) { background-color: #f2f2f2; } tr:nth-child(odd) { background-color: #c0e4fc; } </style> </head> <body> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>职业</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>25</td> <td>男</td> <td>工程师</td> </tr> <tr> <td>李四</td> <td>30</td> <td>女</td> <td>设计师</td> </tr> <tr> <td>王五</td> <td>40</td> <td>男</td> <td>销售经理</td> </tr> <tr> <td>赵六</td> <td>28</td> <td>女</td> <td>市场专员</td> </tr> </tbody> </table> </body> </html> ``` 效果图如下： ![效果图](https://i.imgur.com/3qU6JgH.png)

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值