forEach数据渲染
程序员文章站
2022-06-16 10:29:45
...
<!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>
* {
margin: 0;
padding: 0;
}
table {
border: 1px solid #333;
border-collapse: collapse
}
table th,
td {
border: 1px solid #333;
width: 100px;
height: 30px;
text-align: center;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>id</th>
<th>产品名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var date = [{
id: 1,
pname: '小米',
price: 3999
}, {
id: 2,
pname: 'oppo',
price: 999
}, {
id: 3,
pname: '荣耀',
price: 1299
}, {
id: 4,
pname: '华为',
price: 1999
}];
//1、获取相应的元素
var tbody = document.querySelector('tbody');
//2、把数据渲染到页面中
date.forEach(function(value) {
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + value.id + '</td>' + '<td>' + value.pname + '</td>' + '<td>' + value.price + '</td>'
tbody.append(tr)
})
</script>
</body>
</html>
下一篇： 【转】京东消息中间件JMQ