Javascript 在跨列的单独单元格中创建文本元素

我要做的是按下按钮，我会添加4个文本元素，每个文本元素在自己的单元格中；在其相应的列下面。例如，“名称”列将在其下方显示产品名称。请参阅下面所附的图片

  <div id="inventory">
        <!--Here is where we shall store our data-->
       <table class="table">
        <tr class="head-row">
            <th class="table-head">Name</th>
            <th class="table-head">Price</th>
            <th class="table-head">ID</th>
            <th class="table-head">Quantity</th>
        </tr>
    <div>

我的问题是-按下按钮，我的4个元素被创建，但只创建了一个单元格，其中包含我的所有4个元素。如果有人能帮我找到解决方案，那将是惊人的

相关代码附于下文

  <div id="inventory">
        <!--Here is where we shall store our data-->
       <table class="table">
        <tr class="head-row">
            <th class="table-head">Name</th>
            <th class="table-head">Price</th>
            <th class="table-head">ID</th>
            <th class="table-head">Quantity</th>
        </tr>
    <div>

---

我把问题都解决了

只需在forEach循环中创建cell变量，现在它将循环并每次创建一个单元格，然后将我的textNode添加到该单元格中。如果有人有任何建议或替代解决方案，我会非常高兴听到

function addItem(){

    let table = document.querySelector(".table"); 

    let row = document.createElement('tr');
    row.classList.add("row");

    

    //Create our table item
    items[1].forEach(itemProperty =>{
        let textNode = document.createTextNode(itemProperty);
        cell = document.createElement('td'); //ADDED THIS
        cell.appendChild(textNode);
        row.appendChild(cell);
        console.log(itemProperty);
    });

    table.appendChild(row);
}

---

每个值都需要一个

td

元素

//项目
让项目=[
[“芯片”，253163，1]，
[“猪肉”，25316,1]，
[“饼干”，5400，1]
];
document.getElementById（'add'）.addEventListener（'click'，addItem）；
函数addItem（）{
let table=document.querySelector（“.table”）；
让row=document.createElement（'tr'）；
行。类列表。添加（“行”）；
让cell=document.createElement（'td'）；
cell.classList.add（'item-properties'）
//创建我们的表项
items[1]。forEach（itemProperty=>{
设td=document.createElement（'td'）；
让textNode=document.createTextNode（itemProperty）；
td.appendChild（textNode）；
世界其他地区（td）；
});
表2.追加子项（行）；
}

添加
名称
价格
身份证件
量