首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网络编程
JavaScript
正文
怎样在html文档里做隔行换色的多行方法
所属分类：
网络编程
/
JavaScript
阅读数： 1694
收藏 0
赞 0
分享
既然你都知道是隔行换色了，那就隔行换色就是了。方法很多。
最直接的在每一行的<tr>上直接加bgcolor="red"。
用css的话就定义行二个颜色的类。在每一行交替使用这个类就是了。如：
tr class="trClass1"
tr class="trClass2"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <TABLE cellpadding="0" cellspacing="0"> <TR class="t1"> <TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD> </TR> <TR class="t2"> <TD>2</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD> </TR> <TR class="t1"> <TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD> </TR> <TR class="t2"> <TD>2</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD> </TR> <TR class="t1"> <TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD> </TR> <TR class="t2"> <TD>2</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD> </TR> </TABLE> </BODY> </HTML>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
推荐1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <table> <tr><td>第1行</td><td>第1行</td></tr> <tr><td>第2行</td><td>第2行</td></tr> <tr><td>第3行</td><td>第3行</td></tr> <tr><td>第4行</td><td>第4行</td></tr> </table> </body> </html>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
<table width="500" height="25" border="0" cellpadding="0" cellspacing="0"> <SCRIPT>c(1);</SCRIPT><td height="25">blueidea.com</td> <td>第1行</td></tr> <SCRIPT>c(2);</SCRIPT><td height="25">blue</td> <td>第2行</td></tr> <SCRIPT>c(3);</SCRIPT><td height="25">idea</td> <td>第3行</td></tr> <SCRIPT>c(4);</SCRIPT><td height="25">29ok.com</td> <td>第4行</td></tr> </table>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
非常推荐2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>表格隔行换色</title> </head> <body> <table id="tab"> <tr><td>12</td><td>12</td><td>12</td><td>12</td></tr> <tr><td>12</td><td>12</td><td>12</td><td>12</td></tr> <tr><td>12</td><td>12</td><td>12</td><td>12</td></tr> <tr><td>12</td><td>12</td><td>12</td><td>12</td></tr> <tr><td>12</td><td>12</td><td>12</td><td>12</td></tr> </table> </body> </html>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
<html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body bgcolor="#FFFFFF" text="#000000"> <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>山地花费</td></tr> <tr><td>是士大夫金粟兰搭街坊棵</td></tr> <tr><td>打开立脚点艰苦发挥感</td></tr> <tr><td>地方了；赶快地方经过</td></tr> <tr><td>当然人；铁蒺藜课题那样立刻人</td></tr> <tr><td>豆腐干大后方大概部分</td></tr> <tr><td>如同如同忽然体育如同</td></tr> <tr><td>规范化如同依然同样如</td></tr> <tr><td>为了打开</td></tr> </table> </body> </html>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
更多精彩内容
其他人还在看
BootStrap数据表格实例代码
本文通过实例代码给大家分享了BootStrap数据表格的相关知识，感兴趣的朋友一起看看吧
评论 0
收藏 0
赞 0
分享
基于vue的短信验证码倒计时demo
这篇文章主要介绍了基于vue的短信验证码倒计时demo，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
详解React Native开源时间日期选择器组件(react-native-datetime)
本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime)，具有一定的参考价值，有兴趣的可以了解一下
评论 0
收藏 0
赞 0
分享
JS库particles.js创建超炫背景粒子插件(附源码下载)
particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单，代码也很容易实现，下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载，需要的朋友参考下吧
评论 0
收藏 0
赞 0
分享
JS库之Waypoints的用法详解
waypoints的功能非常强大，一款用于捕获各种滚动事件的插件，下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
评论 0
收藏 0
赞 0
分享
强大的JavaScript响应式图表Chartist.js的使用
本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用，具有一定的参考价值，有兴趣的可以了解一下
评论 0
收藏 0
赞 0
分享
详解wow.js中各种特效对应的类名
本篇文章主要介绍了wow.js中各种特效对应的类名 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
JS库之Highlight.js的用法详解
highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解，感兴趣的朋友跟随脚本之家小编一起学习吧
评论 0
收藏 0
赞 0
分享
详解动画插件wow.js的使用方法
本篇文章主要介绍了动画插件wow.js的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
JS库 Highlightjs 添加代码行号的实现代码
Highlightjs是一款优秀的代码高亮Js组件，可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码，需要的朋友参考下吧
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
调查：55.2%受访用户不会相信朋友圈打广告的化妆品
巴西世界杯复盘：七大移动营销案例图文解析
站长VS微商 你选择哪个？
全面剖析日赚500元项目的骗局
如何适当提高垃圾站Google
冲刺双十一 如何做好淘宝双11期间的推广及运营
站长故事
更多
小米、华为互喷的背后：互相吃翔的GDP！
浅析网站运营失败：你除了报怨还学会了什么
小白站长：一次网站被 K 的经历
十年了!一个依靠设计师们热情支撑起的网站
如何让自己的网站流量暴增并增加成交率
运营网站需要修炼三层内功 很多人都维持在第一层上
