前端案例—表格隔行换色

表格隔行换色

效果图

思路分析：

1. 准备表格:表头thead与表体tbody
2. 绑定事件:加载事件 onload()
3. 获取元素:获取表格 document.getElementById()
4. 获取行的长度:表体中tr的数量 length()
5. 行数遍历:for循环
6. 判断奇偶数行:tr的下标余2
7. 设置背景颜色:css

步骤分析：

1. 定义表格 table thead tbody tr th td
2. 定义函数 onload
3. 绑定函数
4. 获取thead中的tr,设置背景颜色
5. 获取tbody中的tr
6. 循环遍历,判断奇偶数行
7. 分别对奇数行与偶数行设置不同的背景颜色

JS版本：

<script type="text/javascript">
		// 加载事件
		window.onload = function() {
			// 获取表格对象
			var tab = document.getElementById("tab");
			
			// 设置表头的背景颜色
			tab.children[0].style.backgroundColor = "navajowhite";
			
			// 设置表体中的tr的背景颜色
			// 获取表体对象
			var trLength = tab.tBodies[0].children.length;
			// 对tr的长度进行遍历
			for (var i = 0; i < trLength; i++) {
				// 判断奇偶数行
				if (i % 2 == 0) {
					// 偶数行
					tab.tBodies[0].children[i].style.backgroundColor = "skyblue";
				} else {
					// 奇数行
					tab.tBodies[0].children[i].style.backgroundColor = "pink";
				}
			}
		}
</script>

jQuery版本：

<script type="text/javascript">
		// 获取表头对象,设置tr的背景颜色  (子代或后代选择器)
		// 获取表体对象,判断奇数行与偶数行  (奇偶数选择器)
        // :odd  选择奇数行
		// :even  选择偶数行
		// css()  给元素添加具体的样式
		$(function(){
			// 1.获取表头对象,设置tr的背景颜色  (子代或后代选择器)
			$("thead tr").css("background-color","navajowhite");
			
			// 2.获取表体对象,判断奇数行与偶数行  (奇偶数选择器)
			$("tbody tr:even").css("background-color","pink");
			$("tbody tr:odd").css("background-color","skyblue");
		})
</script>