首页 | 域名注册 | 自助建站 | 虚拟主机 | 企业邮局 | 租用托管 | 系统介绍 | 客户案例 | 常见问题 | 代理合作
赛淘建站->资讯首页->自助建站->建站学院->技术文章
代理平台演示
如何使表格中的单元格背景颜色黑白交替
发表时间: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输出。
特别提示
运行代码,将发现任何相邻的两个单元格的背景颜色都不一样,类似于黑白地砖的效果

信息评论
您要为您所发的言论的后果负责,故请各位遵纪守法并注意语言文明。
查看评论
匿名
验证码:
标 题:
*
留 言:
*
系统升级记录
10-9
7-26
7-23
10-8
6-26
建站学院
· 图文系统| 我想做个网站,不知道需要了解
· 网站推广| 网站结构和内容是重点
· 网站推广| 服装网站的搜索引擎优化方案
· 网站推广| SEO 的五条黄金准则
· 网站推广| 想学会搜索引擎优化,必须要知
相关信息
自助建站产品分类
代为备案信息提交 | 网站代为制作维护 | 所有自助建站套餐买三年送一年,五年送两年;购买赛淘建站,无维护之忧!

企业自助网站

自助网上商城

婚介交友网站

学校建站系统

医院建站系统

求职招聘系统

商贸网站系统

文学网站系统

政府网站系统

门户网站系统
代为备案 | 素材资源 | 模版展示 | 建站学院 | 关于我们 | 联系我们 | 客户反馈 | 版权说明 | 付款方式
QQ:412936580 技术支持 QQ:398106367 技术支持 QQ:409063475 业务咨询 QQ:330951386 业务咨询 QQ:743240524 业务咨询 QQ:516155989 业务咨询
Copyright © 2000-2008 北京赛淘网络
服务热线:010-81965528 13391822850 13521688501 传真:010-51720932 
工作时间:周一至周六,早9点至下午6点;非上班时间服务电话:13391822850
客服QQ:412936580 398106367 409063475 330951386 516155989 743240524 电子邮件:saitao.com#163.com
公司地址:北京市海淀区榆树林小区1号楼3单元104室 邮编:100081 备案号:京ICP备05071756号
本站常年法律顾问:郭江丽 (13366872873)
本站采用赛淘自助网站系统2.0构建;博采百家之长,造就经典之作,服务中国之企。