实例
<!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>JS动态建表</title>
<style>
table,td,th{
border: 2px solid lightcoral;
}
table{
width: 500px;
border-collapse: collapse;
text-align: center;
}
table caption{
font-size: 1.2rem;
margin-bottom: 15px;
}
thead tr:nth-of-type(1){
background-color: bisque;
}
</style>
</head>
<body>
<table id="cart1">
<caption>购物车1</caption>
<thead>
<tr>
<th>编号</th>
<th>品名</th>
<th>数量</th>
<th>单价</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>手机</td>
<td>1</td>
<td>5000</td>
</tr>
<tr>
<td>2</td>
<td>电脑</td>
<td>1</td>
<td>7000</td>
</tr>
<tr>
<td>3</td>
<td>电视</td>
<td>1</td>
<td>9000</td>
</tr>
</tbody>
</table>
<hr><hr>
<table id="cart2">
<caption>购物车2</caption>
<thead>
<tr>
<th>编号</th>
<th>品名</th>
<th>数量</th>
<th>单价</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var cart1=document.getElementById('cart1');
// 对象数组
var data=[
{id: 1, name:'牛奶',count:3,price:50},
{id: 2, name:'苹果',count:10,price:80},
{id: 3, name:'衣服',count:2,price:600}
];
var cart2=document.getElementById('cart2');
var tbody=cart2.children[2];
// 遍历
data.forEach(function(value){
var tr=document.createElement('tr');
tr.innerHTML='<td>'+value.id+ '</td>';
tr.innerHTML+='<td>'+value.name+ '</td>';
tr.innerHTML+='<td>'+value.count+ '</td>';
tr.innerHTML+='<td>'+value.price+ '</td>';
tbody.appendChild(tr);
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例