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;}
添加回答
举报