时间戳

首页 > 解决方案 > 如何将对象数组添加到 HTML 表中？

javascript - 如何将对象数组添加到 HTML 表中？

问题描述

我在单击按钮时收集 JSON 字符串数据。每次我单击按钮时，都会将另一个产品添加到阵列中。该数组是一个对象数组：

{SKU: "9372983-382L", retail_price: "11.75", list_price: "3.50", product_name: "Tennis balls"}

我将如何获取这些信息并将其插入到表格中？说我有

<div id='table'>
    <table>
    </table>
</div>

JavaScript：

var prodArr=[{SKU: "9372983-382L", retail_price: "11.75", list_price: "3.50", 
product_name: "Tennis balls"}];

function buildTable(data){
    var table = document.getElementById('table');
    const arr = data;
    for(var obj of arr){
        var row = document.createElement('tr');
        for(var val of Object.values(obj)){
            var col = document.createElement('td');
            col.textContent = val;
            row.appendChild(col);
        }
        table.appendChild(row);
    }
}

buildTable(prodArr);

我想为 SKU:、retail_price:、list_price:product_name: 添加标题以及每行的数量文本框。

标签： javascripthtmlarraysobject

解决方案

您可以遍历数组，用于Object.values遍历对象的值，并用于document.createElement创建新的表行以添加到表中。

const table = document.getElementById('table');
const arr = [{SKU: "9372983-382L", retail_price: "11.75", list_price: "3.50", product_name: "Tennis balls"}];
for(const obj of arr){
  const row = document.createElement('tr');
  for(const val of Object.values(obj)){
    const col = document.createElement('td');
    col.textContent = val;
    row.appendChild(col);
  }
  table.appendChild(row);
}
table, tr, td, th {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 2px;
}
<table id="table">
</table>

推荐阅读