php数组生成表格,创建对象数组，以表格数据填充到页面表格中，动态生成一张表...

实例

html>

动态生成表格数据(创建对象数组，使用循环遍历动态生成渲染到页面)2019.05.09

table,th,td{

border:1px solid #666;

}

table{

margin:0 auto;

width:500px;

text-align:center;

border-collapse: collapse;

}

table caption{

font-size:1.2rem;

margin-bottom: 15px

}

thead tr:nth-of-type(1){

background-color: lightblue;

}

编号品名数量单价

1手机150001水果68001笔记本960001手提1500

编号品名数量单价

编号品名数量单价

//创建对象数组

var data = [

{id: 1, name: '牛奶', count: 3, price: 50},

{id: 1, name: '苹果', count: 10, price: 80},

{id: 1, name: '衣服', count: 2, price: 600}

];

//获取表格2

var tbody = document.getElementById('cart2');

//遍历对象数组

data.forEach(function(value){

var tr = document.createElement('tr');

tr.innerHTML = '

' + value.id + '';

tr.innerHTML += '

' + value.name + '';

tr.innerHTML += '

' + value.count + '';

tr.innerHTML += '

' + value.price + '';

tbody.appendChild(tr);

});

var cart3 = document.getElementById('cart3');

var tbody = cart3.tBodies[0];

for(var i = 0;i 

var tr = document.createElement('tr');

Object.keys(data[i]).forEach(function(key){

tr.innerHTML += '

'+data[i][key]+'';

});

tbody.appendChild(tr);

}

运行实例 »

点击 "运行实例" 按钮查看在线实例