前端速成：双月Java之旅（week4）_day2

最新推荐文章于 2024-09-16 21:37:07 发布

若凡໌້ᮨ

最新推荐文章于 2024-09-16 21:37:07 发布

阅读量135

点赞数

文章标签： java 前端 servlet

本文链接：https://blog.csdn.net/weixin_53673193/article/details/126063457

版权

JavaScript HTML 表格隔行换色 onload 动态颜色

关键词由CSDN通过智能技术生成

今天学习的是使用JS实现表格的隔行换色操作。

一般Excel表格在浏览时由于内容多且相似时极其容易看差，使用隔行换色功能可以有效的避免这种问题。我们这里需要对网页中的表格进行隔行换色操作。当表格较短时可以简单的在<tr>行标签内依次添加bgcolor属性来达到手动修改表格颜色的效果；但当表格内容较长时，使用这种方法无疑需要耗费大量的时间，因此我们使用JS在<script>中实现表格隔行换色的操作。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border="1px" width="900px" height="500px">
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr><tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr><tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr><tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr><tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr><tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr><tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr><tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr><tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr><tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>

我们首先使用HTML做一个基本的空白表格，便于观察我们将表格的边框设置为1，并对宽和高进行适当的调整。为了方便隔行换色的结果显示，表格采用十行六列的格式。

技术分析：修改bgcolor属性即可修改颜色。

步骤分析：1.确定事件：在页面加载完成时操作onload

2.事件需要触发函数，我们定义为init()

3.函数具体内容：需要操作页面的元素，要修改表格的每一行，动态的修改行的背景颜色

<script>
	function init(){
		var tab = document.getElementById("tab");
		var rows = tab.rows;
		for(var i=0;i<=rows.length;i++){
			var row = rows[i];
			if(i%2==0){
				row.bgColor = "yellow";
			}else{
				row.bgColor = "pink";
			}
		}
	}
</script>

以上是<script>中的内容，首先是定义函数init()，然后获取需要操作的表，然后定义表的每一行，再使用for函数依次把每一行单独提取出来然后定义，最后根据奇数偶数来判断给表格每一行修改的颜色