当给出一个表格`
var arr=[
{id:1001,name:"苹果IphoneX",price:6900,num:2,info:"最新的苹果手机"},
{id:1002,name:"小米10",price:3900,num:3,info:"最新的小米手机"},
{id:1003,name:"华为meta10",price:8900,num:4,info:"最新的华为手机"},
{id:1004,name:"锤子手机",price:1900,num:1,info:"最新的锤子手机"},
{id:1005,name:"三星手机",price:4900,num:2,info:"最新的三星手机"},
{id:1006,name:"vivo手机",price:2900,num:4,info:"最新的vivo手机"},
{id:1007,name:"魅族手机",price:1900,num:5,info:"最新的魅族手机"},
];
我们需要把数组中的内容输出到表格里,且表格里应当有表头,表头信息是对象中的属性名,也就是我们常说的key,这就需要遍历数组然后输出内容在表格中,这个时候我们应当首先把表头信息输出,这时需要遍历属性名,然后按照顺序输出。这里使用for···in方法进行
for(var key in arr[j]){
document.write("<td>"+key+"</td>");
}
然后对数组每个对象进行遍历,将属性名对应的属性值输出到表格对应位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-collapse: collapse;
width: 800px;
}
td,th{
height: 30px;
line-height: 30px;
text-align: center;
font-size: 18px;
border: 1px solid #000000;
}
</style>
</head>
<body>
<script>
var arr=[
{id:1001,name:"苹果IphoneX",price:6900,num:2,info:"最新的苹果手机"},
{id:1002,name:"小米10",price:3900,num:3,info:"最新的小米手机"},
{id:1003,name:"华为meta10",price:8900,num:4,info:"最新的华为手机"},
{id:1004,name:"锤子手机",price:1900,num:1,info:"最新的锤子手机"},
{id:1005,name:"三星手机",price:4900,num:2,info:"最新的三星手机"},
{id:1006,name:"vivo手机",price:2900,num:4,info:"最新的vivo手机"},
{id:1007,name:"魅族手机",price:1900,num:5,info:"最新的魅族手机"},
];
var i=0,j=0;
document.write("<table>"); j=0;
for(i=0;i<arr.length;i++){
if(i===0){
document.write("<tr>");
for(var key in arr[j]){
document.write("<td>"+key+"</td>");
}
document.write("</tr>");
}
else {
document.write("<tr>");
for(let key in arr[j]){
document.write("<td>"+arr[j][key]+"</td>");
}
document.write("</tr>");
j=j+1;
}
}
document.write("</table>");
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。