减小字体
增大字体- ·上一篇文章：仿51job的弹出框+地区选择代码
- ·下一篇文章：javascript逐渐变色的字
当前位置：K88软件开发 → 文章中心 → 编程语言 → JavaScript → JS01 → 文章内容
javascript和Css实现隔行换色的几种方法
隔行换色通常用在列表页中，目的是让用户看的清楚每一行，通常有几种方法实现。
1、使用bgcolor属性
2、平铺背景图片
3、CSS类定义
4、纯CSS打造
5、js实现
第一种：也是最基本的，使用bgcolor属性
以下内容为程序代码<
table width="
200"
border="
0"
cellspacing="
0"
cellpadding="
0"
>
<
tr>
<
td height="
22"
bgcolor="
yellow"
>
&
nbsp
<
/td>
<
/tr>
<
tr>
<
td height="
22"
bgcolor="
orange"
>
&
nbsp
<
/td>
<
/tr>
<
tr>
<
td height="
22"
bgcolor="
yellow"
>
&
nbsp
<
/td>
<
/tr>
<
tr>
<
td height="
22"
bgcolor="
orange"
>
&
nbsp
<
/td>
<
/tr>
<
tr>
<
td height="
22"
bgcolor="
yellow"
>
&
nbsp
<
/td>
<
/tr>
<
tr>
<
td height="
22"
bgcolor="
orange"
>
&
nbsp
<
/td>
<
/tr>
<
/table>
也可在程序中动态输出bgcolor中的值。
第二种，平铺图片，使用一张隔行换色的图片作为背景图片
以下内容为程序代码<
table width="
200"
border="
1"
cellspacing="
0"
cellpadding="
0"
background="
http://www.aspprogram.cn/test/line1.jpg"
>
<
tr>
<
td height="
22"
>
&
nbsp
<
/td>
<
/tr>
<
tr>
<
td height="
22"
>
&
nbsp
<
/td>
<
/tr>
<
tr>
<
td height="
22"
>
&
nbsp
<
/td>
<
/tr>
<
tr>
<
td height="
22"
>
&
nbsp
<
/td>
<
/tr>
<
tr>
<
td height="
22"
>
&
nbsp
<
/td>
<
/tr>
<
tr>
<
td height="
22"
>
&
nbsp
<
/td>
<
/tr>
<
/table>
这种方法有一个缺点就是：表格的高度要等于图片高度的一半。
第三种方法，使用CSS类，先定义两个类，每个类对应不同的颜色，使用的方法和方法一差不多
以下内容为程序代码<
style>
.t1
{
background-color:yellow
}
.t2
{
background-color:orange
}
<
/style>
<
table width="
200"
border="
0"
cellspacing="
0"
cellpadding="
0"
>
<
tr>
<
td height="
22"
class="
t1"
>
&
nbsp
<
/td>
<
/tr>
<
tr>
<
td height="
22"
class="
t2"
>
&
nbsp
<
/td>
<
/tr>
<
tr>
<
td height="
22"
class="
t1"
>
&
nbsp
<
/td>
<
/tr>
<
tr>
<
td height="
22"
class="
t2"
>
&
nbsp
<
/td>
<
/tr>
<
tr>
<
td height="
22"
class="
t1"
>
&
nbsp
<
/td>
<
/tr>
<
tr>
<
td height="
22"
class="
t2"
>
&
nbsp
<
/td>
<
/tr>
<
/table>
第四种方法：纯CSS打造
以下内容为程序代码<
style>
tr
{ yexj00:expression(this.style.background=(rowIndex%2==1)?'orange':'yellow')}
<
/style>
<
table width=200 style="
border-collapse:collapse
table-layout:fixed"
border rules=cols>
<
tr>
<
td>
&
nbsp
<
/td>
<
/tr>
<
tr>
<
td>
&
nbsp
<
/td>
<
/tr>
<
tr>
<
td>
&
nbsp
<
/td>
<
/tr>
<
tr>
<
td>
&
nbsp
<
/td>
<
/tr>
<
tr>
<
td>
&
nbsp
<
/td>
<
/tr>
<
tr>
<
td>
&
nbsp
<
/td>
<
/tr>
<
/table>
此方法有个缺点，只支持IE
第五种，纯javascript打造
以下内容为程序代码<
style>
td
{
height:20px
}
<
/style>
<
script type="
text/javascript"
>
function bgChange()
{
if(!document.getElementsByTagName) return false
var tables = document.getElementsByTagName("
table"
)
for(var i=0
i<
tables.length
i++)
{
var odd = false
trs = tables[i].getElementsByTagName("
tr"
)
for(var j=0
j<
trs.length
j++)
{
if(odd==true)
{
trs[j].style.background = "
orange"
odd = false
}else
{
trs[j].style.background = "
yellow"
odd = true
}
}
}
}
window.onload = bgChange
<
/script>
<
/head>
<
body>
<
table width="
200"
border="
0"
cellpadding="
0"
cellspacing="
0"
>
<
tr>
<
td>
<
/td>
<
td>
<
/td>
<
td>
<
/td>
<
/tr>
<
tr>
<
td>
<
/td>
<
td>
<
/td>
<
td>
<
/td>
<
/tr>
<
tr>
<
td>
<
/td>
<
td>
<
/td>
<
td>
<
/td>
<
/tr>
<
tr>
<
td>
<
/td>
<
td>
<
/td>
<
td>
<
/td>
<
/tr>
<
tr>
<
td>
<
/td>
<
td>
<
/td>
<
td>
<
/td>
<
/tr>
<
tr>
<
td>
<
/td>
<
td>
<
/td>
<
td>
<
/td>
<
/tr>
<
tr>
<
td>
<
/td>
<
td>
<
/td>
<
td>
<
/td>
<
/tr>
<
tr>
<
td>
<
/td>
<
td>
<
/td>
<
td>
<
/td>
<
/tr>
<
/td>
<
/tr>
<
/table>
javascript和Css实现隔行换色的几种方法
