放弃class与js实现隔行换色效果

最新推荐文章于 2023-02-25 10:43:08 发布
最新推荐文章于 2023-02-25 10:43:08 发布
阅读量530 收藏
点赞数
分类专栏： CSS-JavaScript 文章标签： class table border css ie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/courseware/article/details/1912701
版权
其实也是挺"傻"的方法，利用了CSS2 -  相邻选择符 制作的效果。要不是新出的IE7支持该选择符，俺还木敢发出来呢~


隔行换色示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>放弃class与js实现隔行换色效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="PengRong" />

<style type="text/css">
<!-- /* PR-CSS */
table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}
table td {border:solid #999;border-width:0 1px 1px 0;}

tr {background:#eee;}
tr + tr {background:#ccc;}
tr + tr + tr {background:#eee;}
tr + tr + tr + tr {background:#ccc;} 
tr + tr + tr + tr + tr {background:#eee;} 
-->
</style>
</head>

<body>
<table>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
</table>
</body>
</html>

隔列换色示例：
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>放弃class与js实现隔列换色效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="PengRong" />

<style type="text/css">
<!-- /* PR-CSS */
table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}
table td {border:solid #999;border-width:0 1px 1px 0;}

td {background:#eee;}
td + td {background:#ccc;}
td + td + td {background:#eee;}
td + td + td + td {background:#ccc;} 
td + td + td + td + td {background:#eee;} 
-->
</style>
</head>

<body>
<table>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
</table>
</body>
</html>
 
courseware
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【TypeScript】深入学习TypeScript装饰器
前端之行，任重道远！
08-06 6617
本篇文章将深入去讲解TypeScript中的装饰器，这也许会是你看过的最全面最细致的TypeScript，关注博主学习TypeScript不迷路！！！
前端学习（1559）：ng-classt隔行变色
歌谣的博客
06-26 269
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ng-app指令</title> <style> .red { ...
CSS 隔行换色
不生产代码_代码的搬运工的博客
07-10 902
$("tr :gt(0) :odd")  奇数(大于0)$("tr :even")  偶数(大于0)
小练习1：隔行变色
weixin_34293141的博客
09-21 214
第一个小练习，练习JS中比较简单的隔行变色问题，隔行变色主要通过改变li的class名称来改变各行的css属性 #div li.bg0{ background: pink; color: burlywood; } #div li.bg1{ background: orange...
实现表格隔行变色研究
技术就是个纸老虎---为之，则难者亦易矣；不为，则易者亦难矣。
11-21 1135
        表格隔行变色，是很多项目中经常用到的，今日闲着没事就对表格隔行变色做了些研究，这里共找了4种方法，所有方法实现的效果如下：一、隔行给TR的class赋值，来实现隔行变色        首先在样式里建立表格隔行变色的样式累类，如下代码：         .tbDatalist tr.altrow        {            background-color: #a5e5aa;        }        然后在table的隔行tr里，增加此样式，这种方式比较原始和麻烦完整代码如
Vue自定义隔行变色（一个标签使用两个class样式）
最新发布
半度纳的博客
02-25 487
自定义隔行变色样式（适用于 el-row中），通过判断是奇数偶数来使用不同的class样式；
JavaScript笔记
shine_my的博客
03-13 3255
JavaScript笔记
MPEG-2视频解码中的帧重建与显示控制技术探究
其中，运动估计通过帧间预测实现视频帧之间的相关性利用，变换编码通过离散余弦变换将空间域的亮度和色度信息转换为频域信息，量化过程通过舍弃部分细节信息实现数据压缩，最后通过熵编码进一步压缩数据以减小传输带...
使用Spring Boot实现个人博客简单展示
weixin_42543839的博客
07-12 1167
什么是Spring Boot Spring Boot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。通过这种方式，Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者。 简介 使用Spring Boot实现个人博客登录，增删改查，分页等功能 目录 代码实现 pom.xml <?xml version
前端2020面试题195道
weijieyuhyt的博客
01-13 1万+
HTML5面试题 一、 Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式? <!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 严格模式就是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法， 混杂模式...
四种实现CSS隔行换色的方法
eddy615的专栏
09-16 2200
     CSS隔行换色的问题，其实很简单，您可以根据您的需要，采用下面的任何一种方法，当然，要适合你的编码与需求情况：一、background背景图片如果行高固定的话，推荐使用背景图，也推荐将行高固定！兼容一切浏览器。二、CSS Expression文字：color:expression(this.sourceIndex%2 ? #ff0000:#000000);背景：backgroun
一个用CSS实现隔行变色的技术
zhangjunji111的博客
01-30 337
以前在做页面显示列表时候，要做一组数据隔行变色，当时不知道，竟然用来了好多java脚本判断，写了许多像下面的例子。 &lt;table&gt; &lt;%int c =0;%&gt; //循环取列表 &lt;% if (c % 2 == 0) { className = "一种颜色"; } else ...
纯 css 控制隔行变色
weixin_30670925的博客
08-05 465
使用：:nth-child 选择器 tr:nth-child(odd) { background-color: #ccc; } tr:nth-child(even) { background-color: #F9F9F9; } 　　 odd 奇数行even 偶数行效果： 转载于:https://www.cnblog...
表格隔行换色
weixin_30291791的博客
01-22 267
实现列表中隔行显示背景颜色 Html代码 <div class="searchListDetail"> <ul class="bold"> <li>姓名</li><li>公司</li><li>职位</li><li>标签</li><li&gt...
js实现隔行变色
热门推荐
zhang的博客
10-16 1万+
&lt;body&gt; &lt;ul&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&
CSS 通过nth实现隔行换色
zhangfeng2124的专栏
03-27 4870
先上效果图： 实现代码： .mytable{ width:100%; border-collapse:collapse; } .mytable td{ border:1px solid black; } .mytable tr:nth-child(2n){ background-color: red; } .mytable tr:nth-child(2n-1){
病毒、蠕虫与木马之间有什么区别？
courseware的专栏
12-02 7987
随着互联网的日益流行，各种病毒木马也猖厥起来，几乎每天都有新的病毒产生，大肆传播破坏，给广大互联网用户造成了极大的危害，几乎到了令人谈毒色 变的地步。各种病毒，蠕虫，木马纷至沓来，令人防不胜防，苦恼无比。那么，究竟什么是病毒，蠕虫，木马，它们之间又有什么区别?相信大多数人对这个问题并 没有一个清晰的了解，在这里，我们就来简单讲讲。　　病毒、蠕虫和特洛伊木马是可导致您的计算机和计算机上的信息损坏
CSS图片自动适应大小
courseware的专栏
12-02 3340
图片自动适应大小的问题在平时制作的时候是比较常见的问题，下面提供一个比较简单的解决方法：div img { max-width:600px; //IE7、FF等其他非IE浏览器下最大宽度为600px; width:600px; //所有浏览器中图片的大小为600px; width:expression(document.body.clientWidth>600?"600px":"auto"
JS中setTimeout 和 setInterval 的区别
courseware的专栏
12-10 3295
window对象有两个主要的定时方法，分别是setTimeout 和 setInteval  他们的语法基本上相同，但是完成的功能取有区别。　　setTimeout方法是定时程序，也就是在什么时间以后干什么。干完了就拉倒。　　setInterval方法则是表示间隔一定时间反复执行某操作。　　如果用setTimeout实现setInerval的功能，就需要在执行的程序中再定时调用自己才行
JS实现表格隔行换色与排序技术解析
"JS实现隔行换色的表格排序，主要涉及JavaScript操作DOM元素、数据绑定、CSS样式以及表格排序的实现方法。" 在网页开发中，为了提高用户体验，经常会在表格中使用隔行换色的技术，使得用户更容易区分每一行的数据。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值