表格自动分行换背景

最新推荐文章于 2025-12-31 17:15:11 发布

原创最新推荐文章于 2025-12-31 17:15:11 发布 · 358 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#table #javascript #border #脚本

本文介绍了一种通过JavaScript实现的表格行背景颜色交替显示的方法。该方法利用内联样式为表格的不同行设置不同的背景颜色，并通过简单的循环结构来判断当前行的索引，从而决定应用哪种样式类。此技术可以提升网页表格的可读性和美观度。

脚本说明:
把如下代码加入<body>区域中
<style>
.t1 {background-color:#C8FC98;text-align:center}
.t2 {background-color:#ffffff;text-align:center}
</style>
<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>sdafasdgdasfgggggggasdffasd</td></tr>
<tr><td>asdfgasdddddddddddd</td></tr>
<tr><td>sdagasdcxgggggggggg</td></tr>
<tr><td>dfshfdfgggfdfdsrhfgjh</td></tr>
<tr><td>gjghkjghkhjghdfghdfgh</td></tr>
<tr><td>fdhdfghhfghfghfghfdghfdghf</td></tr>
<tr><td>fghfghvcnbvnvbcvgtr</td></tr>
<tr><td>gfjhvcbcvbvcbcvbvcb</td></tr>
<tr><td>fghdhgdfhfg</td></tr>
<tr><td>shdfsjitirueruiwoiwopeirwueitu</td></tr>
<tr><td>sjdfkjherhtuiehrjfhgsjghghdfgd</td></tr>
</table>
<script Language="Javascript1.2">