javascript解析json格式的字符串，拼接后显示到表格中

最新推荐文章于 2024-02-22 10:23:00 发布

唐维康

最新推荐文章于 2024-02-22 10:23:00 发布

阅读量833

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/taw19960426/article/details/122910160

版权

javascript json 前端

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

知识点

解析json格式的字符串
拼接的HTML设置到tbody当中
加载json格式的对象

结果演示

在这里插入图片描述

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>拼接HTML</title>
		json格式的字符串，拼接的HTML设置到tbody当中
	</head>
	<body>
		<script type="text/javascript">
			var javaData="{\"total\":\"3\",\"data\":[{\"name\":\"xiaoTang\",\"age\":\"18\",\"salary\":\"18k\"},{\"name\":\"xiaoWei\",\"age\":\"19\",\"salary\":\"19k\"},{\"name\":\"xiaoKang\",\"age\":\"20\",\"salary\":\"20k\"}]}";
			//console.log(javaData);
			
			window.onload=function(){
				document.getElementById("displayButton").onclick=function(){
					//console.log(1111);
					//加载json格式的对象
					window.eval("var studentData="+javaData);
					//console.log(studentData.total)
					
					// 拼接HTML
					var studengsArray=studentData.data;
					console.log(studengsArray[0]);
					var iniHTML="";
					for(var i=0;i<studengsArray.length;i++){
						iniHTML+="<tr><td>"+studengsArray[i].name+"</td>";
						iniHTML+="<td>"+studengsArray[i].age+"</td>";
						iniHTML+="<td>"+studengsArray[i].salary+"</td></tr>"
					}
					
					//设置总记录
					document.getElementById("mySpan").innerHTML=studentData.total;
					
					//设置子表数据
					document.getElementById("stutbody").innerHTML=iniHTML;
				}
	
			}
		</script>
			
		<br>
		<input type="button" id="displayButton" value="显示信息" />
		
		<table border="1px" width="40%" id="myTable">
			<tr><th>姓名</th> <th>年纪</th> <th>薪水</th></tr>
			<tbody id="stutbody">
				<!-- <tr><td>Data</td> <td>Data</td> <td>Data</td></tr>
				<tr><td>Data</td> <td>Data</td> <td>Data</td></tr> -->
			</tbody>
			
		</table>
	
		总记录有：<span id="mySpan">0</span>条！
		
	</body>
</html>