如何做单元格背景颜色黑白交替的表格

　　

如何做单元格背景颜色黑白交替的表格
解决思路：
遍历表格的每个单元格，判断当前单元格所在的行和列的奇偶数，然后决定它的颜色。
具体步骤：

1.插入目标表格。这里为了方便，用JavaScript脚本循环输出一个5行2列的表格。

<script>
//此段脚本是为了输出一个5行5列的表格
document.write(’<table id="demo" border="1" align="center" bordercolor="#000000">’)
for(var i=0;i<5;i++){
    document.write(’<tr>’)
    for(var j=0;j<5;j++)
        document.write(’<td>Flash8</a></td>’)
    document.write(’</tr>’)
}
document.write(’</table>’)
</script>

2.定义必要的CSS类。

<style>
#demo{text-align:center;font:normal 10px Verdana;height:100%;width:80%;border-collapse:collapse}
.bg1{background-color:#000000;color:#FFFFFF}
.bg2{background-color:#FFFFFF;color:#000000}
</style>

3.加入脚本遍历表格中的所有单元格。

<SCRIPT>
window.onload=function(){//当页面加载完成时执行函数
          var tb=document.all.demo  //demo是目标表格的id
          for(var i=0;i<tb.rows.length;i++)//遍历表格的所有行
              for(var j=0;j<tb.rows[i].cells.length;j++)  
//遍历每行的单元格
                    tb.rows[i].cells[j].className=(i+j)%2?’bg2’:’bg1’
}
</SCRIPT>

4.完整代码。

<style>
#demo{text-align:center;font:normal 10px Verdana;height:100%;width:80%;border-collapse:collapse}
.bg1{background-color:#000000;color:#FFFFFF}
.bg2{background-color:#FFFFFF;color:#000000}
</style>
<SCRIPT>
window.onload=function(){//当页面加载完成时执行函数
          var tb=document.all.demo  //demo是目标表格的id
          for(var i=0;i<tb.rows.length;i++)//遍历表格的所有行
              for(var j=0;j<tb.rows[i].cells.length;j++)  
//遍历每行的单元格
                    tb.rows[i].cells[j].className=(i+j)%2?’bg2’:’bg1’
}
</SCRIPT>
<script>
//此段脚本是为了输出一个5行5列的表格
document.write(’<table id="demo" border="1" align="center" bordercolor="#000000">’)
for(var i=0;i<5;i++){
    document.write(’<tr>’)
    for(var j=0;j<5;j++)
        document.write(’<td>Flash8</a></td>’)
    document.write(’</tr>’)
}
document.write(’</table>’)
</script>

注意：表格ID属性设置为demo要跟CSS中的ID选择符一致。
技巧：可以把JavaScript输出的表格换为HTML输出。
特别提示
运行代码，将发现任何相信的两个单元格的背景颜色都不一样，类似于黑白地砖的效果，如图1.2.38所示。

图 1.2.38 黑白交替单元格背景色

特别说明

通过制作黑白交替的单元格背景色效果，本例主要说明如何遍历表格的所有行和所有单元格。