js实现单双行以不同颜色显示

最新推荐文章于 2022-10-27 17:04:12 发布

秋叶为何落

最新推荐文章于 2022-10-27 17:04:12 发布

阅读量6.5k

点赞数 1

分类专栏： JavaScript 文章标签： table javascript border function 旅游

本文链接：https://blog.csdn.net/lwcumt/article/details/8028505

版权

本文介绍如何使用JavaScript实现HTML表格中奇偶行背景颜色交替，以提高数据可读性。通过遍历表格行，应用不同的CSS类来区分单双行，提升用户体验，尤其适用于展示大量数据的表格。

摘要由CSDN通过智能技术生成

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb3212">
		<title>单双行显示不同的颜色</title>
		<!--下面为javascript代码-->
		<script type = "text/javascript">
				window.onload = function color(){//窗口加载时调用
				var table = document.getElementById("person");//根据table的 id 属性值获得对象
				var rows = table.getElementsByTagName("tr");//获取table类型的tr元素的列表
				for(var i = 0; i < rows.length; i++){
				 	if(i % 2 == 0){
				  		rows[i].style.backgroundColor = "#EAF2D3";//偶数行时背景色为#EAF2D3
				    }
				    else{
				     	rows[i].style.backgroundColor = "White";//单数行时背景色为white
				 	}
				}
			}
		</script>
		<!--下面为css代码-->
		<style type = "text/css">
			#person
				{
					border-style:1px solid;
					border-color:blue;
					font-weight:bold;
					font-family:楷体,Arial,

最低0.47元/天解锁文章

秋叶为何落

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
js实现单双行以不同颜色显示

单双行显示不同的颜色 window.onload = function color(){//窗口加载时调用 var table = document.getElementById("person");//根据table的 id 属性值获得对象 var rows = table.getElementsByTagName("tr");//获取table类型的tr元素
复制链接

扫一扫

专栏目录