<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table{
width: 600px;
border-collapse: collapse;
}
th,td{
border: 1px solid black;
}
th{
background-color: pink;
color: #fff;
}
</style>
</head>
<body>
<table>
<tr><th>姓名</th><th>年齡</th><th>性別</th><th>城市</th></tr>
</table>
<script>
var ary = [
{name:'張三',age:18,sex:0,city:"北京"},
{name:'李四',age:30,sex:1,city:"北京"},
{name:'王五',age:28,sex:1,city:"北京"},
{name:'趙六',age:31,sex:0,city:"北京"}
];
var str = '';
//外層循環遍歷數組,創建行
for(var i = 0; i < ary.length; i++){
str += '<tr>';
var user = ary[i];
//裏層循環遍歷對象,創建單元格
for(var key in user){
str += '<td>'+user[key]+'</td>';
}
// for(var key in ary[i]){
// str += '<td>'+ ary[i][key] +'</td>';
// }
str += '</tr>';
}
var table = document.getElementsByTagName('table')[0];
table.innerHTML =table.innerHTML + str;
</script>
</body>
</html>
實現效果如下
