【JS学习总结】如何使用JS实现表格隔行换色

最新推荐文章于 2024-12-02 07:00:00 发布

原创最新推荐文章于 2024-12-02 07:00:00 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

这篇博客总结了如何使用JavaScript实现表格隔行换色的效果。通过DOM操作获取表格行元素，并利用奇偶性判断来设定不同行的背景颜色。文章详细介绍了所需的技术点，包括DOM操作和BOM的window.onload事件。代码示例和实现效果也一同展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：这个系列主要是对之前学习JavaScript实现的一些小demo的总结，总觉得不能这样学过了就算了，趁着假期就好好总结一下吧。

在平常的网站开发中，我们常常会遇到需要实现表格隔行换色这个需求，那么，这种效果要怎样才能够实现呢？

首先，我们先来分析一下，实现这种需求，我们可以先获取到表格中每一行的元素，然后再根据每一行的下标来判断这一行应该使用哪一种颜色，也就是说要进行一个奇偶性判断，然后再设置其对应的背景颜色就ok了。好，分析完之后，我们就来看看需要用到哪些技术点吧！

使用的技术点如下：

DOM操作：获取标签元素

BOM:使用window.onload 让页面在加载的时候就执行我们的JS代码

代码如下：

主要的HTML代码如下：

<body>
		<table id="tab" align="center" border="1px" cellspacing="0px" width="500px">
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>20</td>
				</tr>
				<tr>
					<td>2</td>
					<td>李四</td>
					<td>20</td>
				</tr>
				<tr>
					<td>3</td>
					<td>王五</td>
					<td>20</td>
				</tr>
				<tr>
					<td>4</td>
					<td>赵六</td>
					<td>20</td>
				</tr>
				<tr>
					<td>5</td>
					<td>田七</td>
					<td>20</td>
				</tr>
			</tbody>
		</table>
	</body>

JS关键代码如下：

<script language="JavaScript">
		window.onload = function(){
				//1.获取表格
				var tblEle = document.getElementById("tab");
				//2.获取表格中tbody里面的行数(长度)
				var len = tblEle.tBodies[0].rows.length;
				//3.对tbody里面的行进行遍历
				for(var i=0;i<len;i++){
					if(i%2==0){
						//4.对偶数行设置背景颜色
						tblEle.tBodies[0].rows[i].style.backgroundColor="pink";
					}else{
						//5.对奇数行设置背景颜色
						tblEle.tBodies[0].rows[i].style.backgroundColor="gold";
					}
				}
			}
		</script>

实现效果如下：