怎样在html文档里做隔行换色的多行方法

更新时间：2007年01月13日 00:00:00 作者：

既然你都知道是隔行换色了，那就隔行换色就是了。方法很多。
最直接的在每一行的<tr>上直接加bgcolor="red"。
用css的话就定义行二个颜色的类。在每一行交替使用这个类就是了。如：
tr class="trClass1"
tr class="trClass2"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML>  <HEAD>   <TITLE> New Document </TITLE>   <META NAME="Generator" CONTENT="EditPlus">   <META NAME="Author" CONTENT="">   <META NAME="Keywords" CONTENT="">   <META NAME="Description" CONTENT="">   <style type="text/css">     table{         width:100%;     }     .t1{         background:#ff6600;         color:black;     }     .t2{         background:#336699;         color:white;     }   </style>  </HEAD>  <BODY>   <TABLE cellpadding="0" cellspacing="0">   <TR class="t1">     <TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD>   </TR>   <TR class="t2">     <TD>2</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD>   </TR>     <TR class="t1">     <TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD>   </TR>   <TR class="t2">     <TD>2</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD>   </TR>     <TR class="t1">     <TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD>   </TR>   <TR class="t2">     <TD>2</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD>   </TR>   </TABLE>  </BODY> </HTML>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

推荐1

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

非常推荐2

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>表格隔行换色</title> <style type="text/css" media="screen">  </style> </head> <body> <table id="tab"> <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> <script type="text/javascript">  </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

<html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> .t1 {background-color:#336699;text-align:center} .t2 {background-color:#ffcc00;text-align:center} </style> </head> <body bgcolor="#FFFFFF" text="#000000"> <table id="table1" width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td>jsjsdjksdfdfgdfd</td></tr> <tr><td>vrtbtynyudegbg</td></tr> <tr><td>btrgjyjyukmymy</td></tr> <tr><td>fvdfthdhyjd</td></tr> <tr><td>htyjertyuktuijcdukdetyjety</td></tr> <tr><td>fdghrguiowheruighiaue</td></tr> <tr><td>aosiiopweorhwdebfcjlhaSD</td></tr> <tr><td>SDHFKAJBNELFJAOSDFA</td></tr> <tr><td>山地花费</td></tr> <tr><td>是士大夫金粟兰搭街坊棵</td></tr> <tr><td>打开立脚点艰苦发挥感</td></tr> <tr><td>地方了；赶快地方经过</td></tr> <tr><td>当然人；铁蒺藜课题那样立刻人</td></tr> <tr><td>豆腐干大后方大概部分</td></tr> <tr><td>如同如同忽然体育如同</td></tr> <tr><td>规范化如同依然同样如</td></tr> <tr><td>为了打开</td></tr> </table> <script Language="Javascript"> for (i=0;i<table1.rows.length;i++) { (i%2==0)?(table1.rows(i).className = "t1"):(table1.rows(i).className = "t2"); } </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

怎样在html文档里做隔行换色的多行方法

js控制多图左右滚动切换效果代码分享
这篇文章主要介绍了js控制多图左右滚动切换效果，很实用的代码，推荐给大家，有需要的小伙伴可以参考下。
2015-08-08
原生js实现轮播图的示例代码
本篇文章主要介绍了原生js实现轮播图的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
JS返回上一页实例代码通过图片和按钮分别实现
返回上一页的方法有很多，本代码通过图片和按钮分别实现，感兴趣的朋友可以参考下，希望对大家有所帮助
2013-08-08
JavaScript定义及输出螺旋矩阵的方法详解
这篇文章主要介绍了JavaScript定义及输出螺旋矩阵的方法,简单描述了螺旋矩阵的概念、原理并结合实例形式分析了javascript定义与输出螺旋矩阵的具体操作技巧,需要的朋友可以参考下
2017-12-12
JavaScript中的类继承
JavaScript一种没有类的，面向对象的语言，它使用原型继承来代替类继承。
2010-11-11
千万不要错过的JavaScript高效对比数组差异方法
前端开发中，我们通常需要对比两个数组对象的差异。这其中有很多种方法，但是有些方法会带来一些问题，所以本文为大家准备了一个高效方法，需要的可以参考一下
2023-05-05
JS访问DOM节点方法详解
这篇文章主要介绍了JS访问DOM节点方法,结合实例形式较为详细的分析了JS访问DOM节点的相关函数与使用方法,需要的朋友可以参考下
2016-11-11
一文详解JSON.parse和JSON.stringify的用法
Json.stringify()和toString()两者虽然都可以讲目标值转为字符串,但是还是有本质区别的,下面这篇文章主要给大家介绍了关于JSON.parse和JSON.stringify用法的相关资料,需要的朋友可以参考下
2023-01-01
javascript实现点击按钮变色
这篇文章主要为大家详细介绍了javascript实现点击按钮变色，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
详解A标签中href=""的几种用法
这篇文章主要介绍了a标签中href=""的几种用法 ,需要的朋友可以参考下
2017-08-08

怎样在html文档里做隔行换色的多行方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具