游客

标题:JS通过奇数项和偶数项实现两种背景颜色的表格实现代码
正文:
本文提供一种好看表格的解决方案，通过为<tr>元素添加属性或类型选择器，再通过CSS设置可以实现双背景色表格，但如果表格很长，逐个元素添加可真麻烦。而且这样的代码维护起来不容易。所以比较好的方式是用JS实现。原理其实很简单：利用getElementsByTagName得到所有的<tr>元素，然后分别为奇数项和偶数项的<tr>元素添加背景颜色。核心代码： function color() { //把表头设为紫色 var th = document.getElementById("th"); th.style.background = "violet" //1.得到所有<tr>元素 var trs = document.getElementsByTagName("tr"); var i; for(i = 1; i <trs.length; i++) { //2.改变<tr>元素的背景颜色 if(i % 2 == 0) { trs[i].style.background = "yellow"; } else { trs[i].style.background = "olive"; } } } window.onload = color; 全部代码： <html> <head> <title>双色表格</title> <style type="text/css"> <!-- table { border:solid 1px black; text-align:center; border-spacing:0px; } th,td { border:solid 1px black; width:100
[<<][[1]][2][3][>>]

查看评论(0)
发表评论

 首页