将数据加载到表格中并在页面中显示出来

文章目录

• 总结

---

一、代码如下

		<table id="table" align="center" border="1" bordercolor="red" style="border-collapse: collapse;">
		</table>
		<script type="text/javascript">
			var data = [{
				stuid: 1001,
				stuname: "张三",
				stusex: "男"
			}, {
				stuid: 1002,
				stuname: "李四",
				stusex: "男"
			}, {
				stuid: 1003,
				stuname: "小红",
				stusex: "女"
			}]
			// 创建标题
			var text = ["学号", "姓名", "性别"]
			var heads = ["stuid", "stuname", "stusex"]
			// 找到表格
			var table = document.getElementById("table")
			// 创建行
			var trs = document.createElement("tr")
			// 把行放进table里面
			table.appendChild(trs)
			// 把表头放进去
			for (var i = 0; i < text.length; i++) {
				// 创建个单元格
				var th = document.createElement("th")
				// 把循环的数组放进去
				th.innerHTML = text[i]
				// 放进th里面
				trs.appendChild(th)
			}
			// 循环这个数组
			for(var j=0;j<data.length;j++){
				// 创建行
				var tr=document.createElement("tr")
				// 放进table里面
				table.appendChild(tr)
				// 循环表头
				for(var z=0;z<text.length;z++){
					// 创建单元格
					var td=document.createElement("td")
					// 在单元格中放入data数组下标为j的中heads数组中第z个
					td.innerHTML=data[j][heads[z]]
					// 放进td里面
					tr.appendChild(td)
				}
			}
		</script>

---

代码效果

 

总结