【JavaScript】Js动态生成表格&填入内容&赋予表格不同颜色

煮雨小筑

已于 2023-03-01 21:18:56 修改

阅读量629

点赞数

分类专栏： HTML 文章标签： javascript html 前端

于 2023-03-01 20:44:09 首次发布

本文链接：https://blog.csdn.net/weixin_44874457/article/details/129289357

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

该文章展示了一段JavaScript代码，它在页面加载完成后动态创建一个表格，表格包含了预定义的数据，每个单元格有不同的边框样式。代码使用了嵌套数组来存储数据，并通过createElement方法创建DOM元素来构建表格结构。

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title></title>
	<style>
		table {border-collapse:collapse} 
		.td0
		{
			width:80px;
			height:20px;
			border:2px solid blue;
		}
		.td1
		{
			width:80px;
			height:20px;
			border:2px dashed green;
		}
		.td2
		{
			width:80px;
			height:20px;
			border:2px solid purple;
		}
		.td3
		{
			width:80px;
			height:20px;
			border:2px dashed #4B4193;
		}
	</style>
	<script>
		//table:表格元素;tr:表格行元素;td:单元格元素
		//A.appendChild(B)将B元素添加进A元素中
		//window.onload()表示等页面所有内容都加载完再执行该函数
		//定义嵌套数组，将该数组中的内容填入生成列表
		var arr = [["姓名","语文","数学","英语"],["张三",100,60,80],["李四",90,70,85],["王五",78,69,81]]
		window.onload = function () 
		{
			var oTable = document.createElement("table"); //创建table元素
			for (var i = 0;i < 4;i++) //生成四行
			{
				var oTr = document.createElement("tr");
				for (var j = 0;j < 4;j++) //生成四列
				{
					var oTd = document.createElement("td");
					oTd.className = "td"+j; //定义每一个单元格的class
					
					var a = document.createTextNode(arr[i][j]) //将嵌套数组中的元素填入生成的表格
					oTd.appendChild(a)
					
					oTr.appendChild(oTd); //将oTd元素添加进入oTr元素中
				}
				oTable.appendChild(oTr);
			}
			document.body.appendChild(oTable);
		}
	</script>
</head>
<body>
</body>
</html>

最终效果