<!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>
实现效果如下
1284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
