动态表：代替单元格为一个特定列提供INPUT字段如何操作

如何解决动态表：代替单元格为一个特定列提供INPUT字段如何操作

我正在制作购物清单，并且已经根据对象数组创建了动态表。用户可以更新的表。

现在我要做的是可以通过使用步骤输入选项来修改aantal（含义数量）：

输入type =“ number” id =“ points” name =“ points” step =“ 3”

因此，预期输出将是此表，其中aantal将是步骤输入。当用户修改时，这将改变课程的总价格。现在它已经在进行哪个计算了。

我对生成表并不那么有经验。我认为我需要使用for循环创建一个新变量，该变量会更改aantal的单元格。但是我该怎么办呢？我一直在乱七八糟。而且我有点卡住。我希望我的问题很清楚。

更新：我正在使用For in循环，到目前为止，我可以生成INPUT字段，但不能在正确的位置进行。我的状况和表格生成还不顺利：）

更新：我意识到我可以使用步骤输入制作另一个标题，我也意识到它的类型=数字输入字段。 oops 现在，我将尝试将正确的值放入数组。

这是我的代码：

let myTable = document.querySelector('#table');

//array met objecten erin {} staat voor een object
    let product =  [
    {omschrijving:"Brood",waarde:1,aantal:3,total:0},{omschrijving:"Brocolli",waarde:0.99,aantal:2,{omschrijving:"Krentenbollen",waarde:1.20,aantal:4,{omschrijving:"Noten",waarde:2.99,total:0}
    ]
//update totals
    for(let i=0;i<product.length;i++)
{
  product[i].total = product[i].waarde*product[i].aantal;
}

    let headers = ['Name','Prijs','Aantal','Totaal'];

    
        let table = document.createElement('table');
        let headerRow = document.createElement('tr');
     
        headers.forEach(headerText => {
            let header = document.createElement('th');
            let textNode = document.createTextNode(headerText);
            header.appendChild(textNode);
            headerRow.appendChild(header);
        });
     
        table.appendChild(headerRow);
     
        product.forEach(emp => {
            let row = document.createElement('tr');
     
            Object.values(emp).forEach(text => {
                let cell = document.createElement('td');
                let textNode = document.createTextNode(text);
                cell.appendChild(textNode);
                row.appendChild(cell);
            })
     
            table.appendChild(row);
        });
     
        myTable.appendChild(table);

        function updateTable() {

            test = [];
           
            b1 = document.getElementById('naam').value;
            b2 = document.getElementById('prijs').value;
            b3 = document.getElementById('qty').value;
          
    
        test.push({omschrijving:b1,waarde:b2,aantal:b3,total:0});

        for(let i=0;i<test.length;i++)
        {
          test[i].total = test[i].waarde*test[i].aantal;
        }

        test.forEach(emp => {
            let row = document.createElement('tr');
     
            Object.values(emp).forEach(text => {
                let cell = document.createElement('td');
                let textNode = document.createTextNode(text);
                cell.appendChild(textNode);
                row.appendChild(cell);
            })
     
            table.appendChild(row);
        });
     
        myTable.appendChild(table);

            console.log(product);
          }

body {
    text-align: center;
}
 
div {
    display: inline-block;
}
 
button {
    display: inline-block;
    padding: 10px 20px;
}
 
#table {
    display: block;
    margin-top: 20px;
}
 
th,td {
    border: 1px solid black;
    padding: 5px;
}

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="style.css">
    
    <title>Boodschappenlijst</title>
</head>
<body>
    <h1> Boodschappenlijst </h1>
    <div id="container"></div>


    <div>
       
        <div id="table"></div>
    </div>

    <p>Naam</p>
    <input type="text" name="item" id="naam" /><br />
    <p>Aantal</p>
    <input type="text" name="quantity" id="qty" /><br />
    <p>Prijs</p>
    <input type="text" name="price" id="prijs" /><br/><br />
    <input type="button" value="Add Product" onclick="updateTable()" id="add"><br /><br />



    <script src="script.js"></script>
</body>
</html>

动态表：代替单元格为一个特定列提供INPUT字段如何操作

如何解决动态表：代替单元格为一个特定列提供INPUT字段如何操作

相关推荐