CSS2实现的隔行换色

利用了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>

赞 (0)

相关推荐

  • 原生javascript实现隔行换色

    js让我们一起从基础来学习,我们一点一点的来学习 下边是我写的代码,然后大家看着学习下吧!!! 复制代码 代码如下: <html> <head> <title>js演示</title> </head> <body> <script> document.write('<table border="1" width="100px" align="center"&

  • jQuery 隔行换色 支持键盘上下键，按Enter选定值

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • 不用javascript实现带序号的表格隔行换色的效果

    .test{ border:1px solid #000; color:#333; font:12px; } .test ol li{ padding-left:5px; background-color:expression(this.sourceIndex%2? '#efefef':'#fefefe'); } 观自在菩萨 行深般若波罗密多时 照见五蕴皆空 度一切苦厄 舍利子 色不异空 空不异色 色既是空 空既是色 受想行识 亦复如是 舍利子 是诸法空相 不生不灭 不垢不净 不增不减 是故空中

  • 使用jquery hover事件实现表格的隔行换色功能示例

    jQuery hover事件 hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种"保持在其中"的状态. 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数.当鼠标移出这个元素时,会触发指定的第二个函数.而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持"悬停"状态,而不触发移出事件(修正了使用mouseout事件的一个常

  • jQuery方法简洁实现隔行换色及toggleClass的使用

    今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>隔行换色</title> <script src="js/jquery-1.4.2.min.js"></script> <style type=&quo

  • javascript 隔行换色函数代码

    先定义两个关于背景色的样式tag为id对象c1为样式1c2为样式2 复制代码 代码如下: <script> function changeRowsBg(tag,c1,c2) { var i = 0; var obj_tag = document.getElementsByTagName(tag); for(i = 0;i < obj_tag.length ;i++){ (i%2 == 0)? obj_tag(i).className = c1 : obj_tag(i).className

  • Js 实现表格隔行换色一例

    Js实现表格隔行换色一例 body{ padding:0; margin:0; font:Arial; font-size:12px;} .bf{ padding:0; margin:auto;} .bf table{ text-align:center;line-height:14pt;} .bf th{ width:50px; padding:10px;} .f1{ background:#fff8f0;} .f2{ background:#f0f7ff;} .f3{ background:

  • 表格 隔行换色升级版

    昨天弄了个表格隔行换色,但是只是一张表里换 如果一个页面里出现多个表格需要怎么整 捣鼓出新的结果 如下: 复制代码 代码如下: function onloadEvent(func){ var one=window.onload if(typeof window.onload!='function'){ window.onload=func } else{ window.onload=function(){ one(); func(); } } } function showtable(table

  • 基于Jquery的表格隔行换色，移动换色，点击换色插件

    基于Jquery的表格隔行换色，移动换色，点击换色插件

    效果图:编写JQUERY插件如下: 复制代码 代码如下: ;(function($) { $.fn.extend({ "alterBgColor":function(options){ //设置默认值 option=$.extend({ odd:"odd", even:"even", selected:"selected" },options); //注意这个options 同上面的function(options)中的opt

  • 表格隔行换色 css expression

    第一行为其它颜色,这样写这个表达式 表格CSS测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试                                            

  • li隔行换色改进版

    ghhs("nav01","li"); // 鼠标经过时变色  ghhs("nav02","li","no"); // 只隔行换色  ghhs("nav03","li","onclick"); // 鼠标点击当前标记变色 隔行换色 - www.jb51.net 我们 // 返回Id.Tag function Pid(id,tag){ if(!tag

随机推荐