将数组里面的内容填充到表格之中,并将属性设置为表头
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style type="text/css">
.text-center{
border: 1px solid #000;
}
</style>
<script>
var arr = [{
id: '1001',
name: '苹果',
price: 2000
},
{
id: '1002',
name: '小米',
price: 2100
},
{
id: '1003',
name: '华为',
price: 2200
}, {
id: '1004',
name: '锤子',
price: 2300
}, {
id: '1005',
name: '三星',
price: 2400
}
];
//表头
var tablehead = ["id", "name", "price"];
//初始化
function init() {
var body = document.body;
var container = document.createElement("div");
body.appendChild(container);
return container;
}
//创建表格
function inittable(container) {
var table = document.createElement("table");
container.appendChild(table);
var tr_head = document.createElement("tr");
table.appendChild(tr_head);
for (var i = 0; i < tablehead.length; i++) {
var th = document.createElement("th");
th.setAttribute("class", "text-center");
th.innerHTML = tablehead[i];
tr_head.appendChild(th);
}
//使用for循环将对象加入到table中去
for (var k = 0; k < arr.length; k++) {
var tr = document.createElement("tr");
table.appendChild(tr);
for (var j = 0; j < tablehead.length; j++) {
var td = document.createElement("td");
td.setAttribute("class", "text-center");
td.innerHTML = arr[k][tablehead[j]];
tr.appendChild(td);
}
}
}
window.onload = function() {
var table=init();
inittable(table);
}
</script>
</head>
<body>
</body>
</html>