将数组中的对象自动添加到表格,永远告别手动书写模板字符串

最新推荐文章于 2022-12-01 23:05:00 发布

置顶旖梦

最新推荐文章于 2022-12-01 23:05:00 发布

阅读量1.2k

点赞数 5

文章标签： javascript html html5

本文链接：https://blog.csdn.net/weixin_45595621/article/details/109510848

版权

## 将数组中的对象自动添加到表格,永远告别手动书写模板字符串

当我们在ajax中请求到mysql数据后如何才能告别手动的插入到页面???

我是个懒人,所以我不想写模板字符串拼接,所以才有了今天的故事

先创建表格,
然后再将数据依次填入表格中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" name="" id="search" value="" />
		<div id="d1">
			
		</div>
		<div id="tb"></div>
		<script type="text/javascript">
			//在这里也是一个例子,它们都可以实现自动创建
			// var stu=[
			// 	{uid:1001,uname:'张三',age:10,tall:175},
			// 	{uid:1002,uname:'李四',age:20,tall:180},
			// 	{uid:1003,uname:'王五',age:30,tall:176}
			// ]
			//在这里我们用数组来模拟将来ajax请求到的数据
			var stu=[
				{uname:"dangdang1",email:"123@123",phone:"134999999",user_name:"小叮当",gender:1},
				{uname:"dangdang2",email:"123@123",phone:"134999999",user_name:"小叮当",gender:0},
				{uname:"dangdang3",email:"123@123",phone:"134999999",user_name:"小叮当",gender:1},
				{uname:"dangdang4",email:"123@123",phone:"134999999",user_name:"小叮当",gender:0},
				{uname:"dangdang5",email:"123@123",phone:"134999999",user_name:"小叮当",gender:0},
				{uname:"dangdang6",email:"123@123",phone:"134999999",user_name:"小叮当",gender:0},
				{uname:"dangdang7",email:"123@123",phone:"134999999",user_name:"小叮当",gender:0},
				{uname:"dangdang8",email:"123@123",phone:"134999999",user_name:"小叮当",gender:1}
			];
			console.log(Object.keys(stu).length);
			console.log(Object.getOwnPropertyNames(stu[0]).length); //在这里,我们实验性的打印了数组中第一个对象的属性个数(因为其他对象的属性个数相同,所以公用一个值就可以了);
			//创建表格开始
			var table=document.createElement("table"); //我们用createElement() 创建了一个空的表格
			table.border="1";
			table.width="100%";
			var tr,td;     //接着我们又创建了tr和td的变量用来保存创建的行和列
			//for循环创建表格过程开始
			for(var i=0;i<Object.keys(stu).length;i++){           
				tr=table.insertRow(table.rows.length);
				for(var j=0;j<Object.getOwnPropertyNames(stu[0]).length;j++){  //在这里我们将之前的实验品投入到了实际应用中 ,不出所料,我们创建的表格数量没有错误.
					td=tr.insertCell(tr.cells.length);
				}
			}
			//for循环创建表格过程结束
			//创建表格结束
				console.log(table.children[0].children);    //获得包含tr标签的数组,其中有3个tr标签
				console.log(table.children[0].children[0].children[0]);    //获得了3个tr标签中的第一个tr下的第一个td标签,我们可以对它进行操作了!(目前的位置是第一行的第一列的格子);
				console.log(table.children[0].children[0].children[1]);   //当前的位置为 第一行的第二个格子,(我们现在可以尝试使用for in循环填入对象中'键'的 值了);
				//开始使用for in循环遍历对象中的'键'
				for(var i=0;i<stu.length;i++){
						var j=0;	                  //外层循环每次循环开始就要将j的值重置为0,以便内部循环重新选择下一行表格的第一个格子的开始
						var objn=0;					  //objn 为每个对象的属性值,同样,外部循环每循环一次重置为0;
					for(var key in stu[i]){           //stu[i]  是选择的第n行的数据表格
						objn++;						  //在遍历对象的过程中objn起到了数数的作用,用来统计每个对象的属性个数;(循环完毕后...)
						// console.log(key);
						// console.log(stu[i][key]);
						if(j<j+1){						//判断,这里的j为每行表格的第n个格子的下标,j+1为最高上限;
						table.children[0].children[i].children[j].innerHTML=stu[i][key];
						j++;
						// console.log(j);
						console.log(objn);
						}
					j=objn;							 //循环完毕后,objn将统计的属性个数传递给j变量,以便内部循环第二次循环的时候知道自己要循环几次,并作判断
					}
					
				}
			document.querySelector("#tb").appendChild(table);   //最后把整个table插入到id为tb 的元素中
			// console.log(document.getElementsByTagName("TR")[i-1].cells[j-1].innerHTML);
			
			// for(var key in stu[i]){
			// 	console.log(stu[i][key]);
			// 	tr.children[i].innerHTML=stu[i][key];
			// };
		</script>
	</body>
</html>

最终我们通过这几行的代码就轻松实现了根据数据对应的创建表格,并写入数据,从而告别了繁复的模板字符串和拼接.

旖梦

关注

5
点赞
踩
13

收藏

觉得还不错? 一键收藏
4
评论
将数组中的对象自动添加到表格,永远告别手动书写模板字符串

## 将数组中的对象自动添加到表格,永远告别手动书写模板字符串当我们在ajax中请求到mysql数据后如何才能告别手动的插入到页面???我是个懒人,所以我不想写模板字符串拼接,所以才有了今天的故事先创建表格,然后再将数据依次填入表格中<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <bo
复制链接

扫一扫