通过Javascript实现把数组里的内容以表格方式呈现到页面从

一、把数组里的内容呈现到页面从，以表格方式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.tb,th,td{
		border: 1px solid #CC5D5E;		
	}
</style>
</head>

<body>
	<table class="tb">
		
		<th>ID</th>
		<th>姓名</th>
		<th>年龄</th>
		
	</table>		
<script>
var Data=[
	{id:1, name:"小米", age:18},
	{id:2, name:"小明", age:10},
	{id:3, name:"小菜", age:20}
]
var tbody=document.querySelector("tbody")
Data.forEach(function(i){
	//i代表数组中的每一个对象
		
	//创建一个tr
	var tr=document.createElement("tr")
	//循环遍历i对象
	for(var key in i){
	
		 //创建td标签
	     var td=document.createElement("td")
         //向td标签里插入（修改）内容
	    var cc=td.innerText=i[key]
		//向tr标签里插入td标签（有内容）
		tr.appendChild(td)			
	}
	//向tbody元素里插入tr标签
	tbody.appendChild(tr)	
	})
</script>
</body>
</html>
posted @ 2022-01-18 16:21  永恒之月TEL  阅读(290)  评论(0)  编辑  收藏  举报