动态表格生成技巧-优快云博客

本文介绍了一种使用JavaScript动态创建HTML表格的方法，通过解析JSON数据格式的员工信息，并将其转化为可视化的表格形式展示出来。该方法首先创建table元素，然后根据JSON数据中的属性动态生成表头和表格内容。

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

<span style="font-size:18px;"><!DOCTYPE HTML>
<html>
<head>
<title>动态创建表格</title>
<meta charset="utf-8" />
<style>
	table{width:600px; border-collapse:collapse;
		text-align:center;
	}
	td,th{border:1px solid #ccc}
</style>
<script>
	//json: 以js对象格式存储或传输数据的字符串格式
	//	json格式和js中的对象直接量完全一样
	//	唯一特别要求: 属性名最好都加引号
	var json='[{"ename":"Tom", "salary":3500, "age":25},{"ename":"John", "salary":3800, "age":28},{"ename":"Mary", "salary":3600, "age":25}]';
	//将json字符串转为内存中的对象
	var emps=eval("("+json+")");
	window.onload=function(){
		//创建table元素
		var table=document.createElement("table");
		//创建thead元素
		var thead=document.createElement("thead");
		//将thead追加到table下
		table.appendChild(thead);
		//创建tr元素
		var tr=document.createElement("tr");
		//将tr元素追加到thead
		thead.appendChild(tr);
		//遍历emps中第一个对象的每个属性
		for(var key in emps[0]){
			//每遍历一个属性，就创建一个th元素
			var th=document.createElement("th");
			//将th元素的内容设置为key
			th.innerHTML=key;
			//将th追加到tr中
			tr.appendChild(th);
		}

		//创建tbody元素
		var tbody=document.createElement("tbody");
		table.appendChild(tbody);//将tbody追加到table中
		//遍历emps中每个员工对象
		for(var i=0;i<emps.length;i++){
			var tr=document.createElement("tr");//创建tr元素
			tbody.appendChild(tr);//将tr追加到tbody下
			//遍历当前员工对象的每个属性
			for(var key in emps[i]){
				//每遍历一个属性，就创建一个td元素
				var td=document.createElement("td");
				//设置td的内容为当前员工对象的key属性的值
				td.innerHTML=emps[i][key];
				tr.appendChild(td);//将td追加到tr中
			}
		}
		//将table追加到id为data的父元素下——layout
		data.appendChild(table);
	}
</script>
</head>
<body>
	<div id="data">
	</div>
</body>
</html>
</span>