用css、js实现table表格隔行变色的效果
新建一个html页面 , 定名为test.html , 用于讲解用css、js实现table表格隔行变色的结果 。
![用css、js实现table表格隔行变色的效果](http://img12.hunanlong.com/exp/w=500/sign=1d4e8081bdb7d0a27bc9049dfbef760d/f11f3a292df5e0fe295f6532536034a85edf72ba.jpg)
文章插图
2在test.html页面 , 利用table标签建立五行四列的表格 , 代码如下:
![用css、js实现table表格隔行变色的效果](http://img12.hunanlong.com/exp/w=500/sign=c9bf1ffef3039245a1b5e10fb794a4a8/4afbfbedab64034f72812b35a0c379310a551db0.jpg)
文章插图
3在test.html页面 , 利用css美化表格 , 设置表格的边框的样式、宽度 , 代码如下:
![用css、js实现table表格隔行变色的效果](http://img12.hunanlong.com/exp/w=500/sign=988ea4320555b3199cf9827573a98286/1c950a7b02087bf43d9cbfdafdd3572c11dfcf95.jpg)
文章插图
4在js中 , 建立一个fun函数 , 并经由过程onload设置在页面加载完当作时 , 执行fun函数 。
![用css、js实现table表格隔行变色的效果](http://img12.hunanlong.com/exp/w=500/sign=abe94f2098dda144da096cb282b7d009/f2deb48f8c5494ee5721e42a22f5e0fe99257e86.jpg)
文章插图
5经由过程getElementById、getElementsByTagName方式获得表格所有的行对象 , 经由过程for轮回遍历表格每一行 , 若是行数为偶数 , 则设置tr的class属性为t2 , 若是行数为奇数 , 则设置tr的class属性为t1 。
![用css、js实现table表格隔行变色的效果](http://img12.hunanlong.com/exp/w=500/sign=9d314e8cafec08fa260013a769ee3d4d/023b5bb5c9ea15ce5ce10a3ab9003af33a87b2f2.jpg)
文章插图
6利用css设置表格行的class属性为t1时 , 单位格的布景颜色为白色 , class属性为t2时 , 单位格的布景颜色为灰色 。
![用css、js实现table表格隔行变色的效果](http://img12.hunanlong.com/exp/w=500/sign=096d726dd2c451daf6f60ceb86fc52a5/b64543a98226cffc0caf5581b6014a90f603ea78.jpg)
文章插图
7【用css、js实现table表格隔行变色的效果】在浏览器打开test.html页面 , 查看表格是否实现了隔行变色的结果 。
![用css、js实现table表格隔行变色的效果](http://img12.hunanlong.com/exp/w=500/sign=6caefa4f5e0fd9f9a0175569152dd42b/caef76094b36acafa98b43cf73d98d1001e99c9e.jpg)
文章插图
以上内容就是用css、js实现table表格隔行变色的效果的内容啦 , 希望对你有所帮助哦!
推荐阅读
- 结婚祝福语高级一点的 有哪些高级的结婚祝福语
- 制大黄的功效与作用 制大黄的功效与作用及禁忌
- 鱼缸造景中很实用的知识
- 养罗汉鱼用多大缸的最好
- 饲养斗鱼要用的器材有什么
- 学校宿舍内使用大功率电器
- 使用劣质插线板的危害
- 真实使用评测!便携式水牙线冲牙器好用吗?
- 冰块在医疗上有什么用
- 手疗针法的常用反应点图解