为了账号安全,请及时绑定邮箱和手机立即绑定

初学JavaScript对此函数不理解,请老师帮忙详细解释一下,先谢谢了!

初学JavaScript对此函数不理解,请老师帮忙详细解释一下,先谢谢了!

MYYA 2022-12-07 15:11:43
function stripeTables() {if (!document.getElementsByTagName) return false;var tables = document.getElementsByTagName("table");for (var i=0; i<tables.length; i++) {var odd = false;var rows = tables[i].getElementsByTagName("tr");for (var j=0; j<rows.length; j++) {if (odd == true) {rows[j].style.backgroundColor = "#ffc";odd = false;} else {odd = true;}}}}
查看完整描述

1 回答

?
莫回无

TA贡献1865条经验 获得超7个赞

1、if (!document.getElementsByTagName) return false; 这句是测试一下浏览器是否支持【document.getElementsByTagName】这个方法,不支持就退出函数。

2、 var tables = document.getElementsByTagName("table"); 查找页面内的table标签,赋值给tables变量

3、 for (var i=0; i<tables.length; i++) { 页面中可能不只一个table,就循环 tables 中的所有table

4、var odd = false; 建立临时的表格行数奇偶识别变量

5、 var rows = tables[i].getElementsByTagName("tr"); 取出 table 中的 tr 元素

6、for (var j=0; j<rows.length; j++) { 对 取出的多个tr进行循环

7、if (odd == true) { 判断是否是奇数行

8、rows[j].style.backgroundColor = "#ffc"; 如果此行是奇数,则将背景设置为 #ffc 颜色

9、odd = false; 将 odd赋值为false,以便进行下一次循环识别

10、else { odd = true; 这里比较绕,如果odd不是true,则设置为true,那么下一次循环,就会进行设置背景色的步骤,然后再设置为false,下次再设置为true,如此反复。

这个函数做为学习研究很好,真实使用中不用那么麻烦的,现在用css就可以很好的解决这个表格间隔色的问题。
只需要这么2行css,即可实现表格间隔色
table tr:nth-child(odd){background:#ffc;}

table td:nth-child(even){color:#fff;}

 


查看完整回答
反对 回复 2022-12-10
  • 1 回答
  • 0 关注
  • 58 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信