怎樣在html文檔里做隔行換色的多行方法

2019-11-21 02:20:05

字體：大中小

供稿：網(wǎng)友

既然你都知道是隔行換色了，那就隔行換色就是了。方法很多。
最直接的在每一行的<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="http://www.survivalescaperooms.com/"/>   <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需刷新才能執(zhí)行]

推薦1

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

非常推薦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需刷新才能執(zhí)行]

<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>打開立腳點艱苦發(fā)揮感</td></tr> <tr><td>地方了；趕快地方經(jīng)過</td></tr> <tr><td>當(dāng)然人；鐵蒺藜課題那樣立刻人</td></tr> <tr><td>豆腐干大后方大概部分</td></tr> <tr><td>如同如同忽然體育如同</td></tr> <tr><td>規(guī)范化如同依然同樣如</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需刷新才能執(zhí)行]

上一篇：怎么在下面的HTML里調(diào)用數(shù)組cs[]的值

下一篇：JavaScript 經(jīng)典效果集