JavaScript Object Notation(json)

最新推荐文章于 2021-02-20 20:55:03 发布

原创最新推荐文章于 2021-02-20 20:55:03 发布 · 880 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #json #对象 #数据

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JSON数据格式动态创建HTML表格的方法。通过解析JSON数据并利用JavaScript将其转换成DOM元素，实现了一个包含姓名、薪资和年龄的员工信息表格。

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

json---一种轻量级的数据交换格式，采用完全独立于语言的文本格式，这样使得JSON成为最理想的数据交换语言，易于机器的解析和生成（一般用于提升网络的传输速率）

创建表格

<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变量存储字符串
 var json='[{"ename":"Tom","salary":3500,"age":25},{"ename":"Eric","salary":4000,"age":26},{"ename":"Mary","salary":5000,"age":24}]';
	
  var emps=eval(json);//将json字符串用eval方法翻译为内存中的对象
	function initEmps(){
		var table=document.createElement("table");//创建空table对象
               var thead=document.createElement("thead");//创建空thead对象
			table.appendChild(thead);//将thead对象追加到table对象中
		var tr=document.createElement("tr");//创建空tr对象
			thead.appendChild(tr);//将tr对象追加到thead对象中
		for(var key in emps[0]){//遍历emps中第一个对象的所有属性
			var th=document.createElement("th");//创建空th对象
			th.innerHTML=key;//设置th的内容为key
			tr.appendChild(th);//将th对象追加到tr对象中
		}
		var tbody=document.createElement("tbody");//创建空tbody对象
			table.appendChild(tbody);//将tbody对象追加到table对象中
		for(var i=0;i<emps.length;i++){//遍历emps中的每个对象
			var tr=document.createElement("tr");//创建空tr对象
				tbody.appendChild(tr);//将tr对象追加到tbody对象中
			for(var key in emps[i]){//遍历当前员工的每个属性
				var td=document.createElement("td");//创建空td对象
					tr.appendChild(td);//将td对象追加到tr对象中
					td.innerHTML=emps[i][key];设置td的内容为当前属性的值
			}
		}
			document.getElementById("data").appendChild(table);//将table追到id为data的div下，
                                                                         //该语句放在此处是为了避免反复layout
	}
	window.onload=function(){
		initEmps();
	}
</script>
</head>
<body>
	<div id="data"></div>
</body>
</html></span>

如果代码在运行过程中有任何错误，还请谅解！