|
|
如何使表格中的单元格背景颜色黑白交替
发表时间:2008-1-2 16:12:29 |
更新时间:2008-11-1 13:42:52 来源:网络 作者:刘海极 编辑: 【 关闭】浏览:
次 | |
| 我们经常会看到表格黑白交替出现的效果,要得到这种效果,可以用js来实现。
使用js实现思路:遍历表格的每个单元格,判断当前单元格所在的行和列的奇偶数,然后决定它的颜色。
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输出。 特别提示 运行代码,将发现任何相邻的两个单元格的背景颜色都不一样,类似于黑白地砖的效果
|
| 信息评论 |
您要为您所发的言论的后果负责,故请各位遵纪守法并注意语言文明。 |
查看评论 | |
|
| |
|