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