如何从动态HTML表中获取特定的用户输入数据Onchange函数，数字值

问题描述

我正在尝试从动态表的输入字段中获取值。这样，当用户更改数字输入字段中的值时，它可以正确计算每一行的总数。

到目前为止，我已经从所有输入字段中获取了数据。我只需要桌子上的那个。

我尝试了一些条件语句，因为我只需要产品对象数组中具有可编辑选项的输入字段。 （可编辑是一个值，用于生成输入字段）

如何正确获取此数据，以便将其乘以价格（我的荷兰语PRIJS专栏）

我认为这很简单，因为我几乎完成了这个项目。但是我被卡住了：s

我在这里证明了一支密码笔：https://codepen.io/3lly/pen/YzqYEOY

数组是Products

我正在处理的数字onchange函数位于JS文件下方的EentjeMeer（）函数中。 要查看控制台日志，请首先单击一个数字:)当我单击第一个时，现在的输出是：

[“ 4”，“ 2”，“ 4”，“ 2”，“”，“，”，“，”添加产品“]

我只需要前4个，其余不是表，而是用户输入字段（然后希望我可以轻松地使用这些值来更新产品数组）

let myTable = document.querySelector('#table');
let rowID = 0;
let inputID = 0;
//Array met objecten erin {} staat voor een object
let products = [
    { omschrijving: { value: "brood" },waarde: { value: 1 },aantal: { value: 3,editable: true },total: { value: 0 } },{ omschrijving: { value: "brocolli" },waarde: { value: 0.99 },aantal: { value: 2,{ omschrijving: { value: "Krentenbollen" },waarde: { value: 1.20 },aantal: { value: 4,{ omschrijving: { value: "Noten" },waarde: { value: 2.99 },total: { value: 0 } }
]
///Update totals in tabel
for (let i = 0; i < products.length; i++) {
    products[i].total.value = products[i].waarde.value * products[i].aantal.value;

}
//Totaal alle producten
const total = products.reduce((currentTotal,productCal) => {
    return productCal.total.value + currentTotal
},0)
const uitslag = total.toFixed(2);
document.getElementById('totaal').innerHTML = "Totaal bedrag  " + uitslag;
////Table ///////////td is column
//Table Headers
let headerTexts = ['Name','Prijs','Aantal','Totaal'];
let table = document.createElement('table');
let headerRow = document.createElement('tr');

headerTexts.forEach(headerText => {
    let header = document.createElement('th');
    let textNode = document.createTextNode(headerText);
    header.appendChild(textNode);
    headerRow.appendChild(header);
});

table.appendChild(headerRow);


products.forEach(product => {
    let row = document.createElement('tr');
    row.className = product.omschrijving.value;

    Object.values(product).forEach(entry => {

        //console.log("row" + rowID);
        let cell = document.createElement('td');
        let cellInput = document.createElement("input");
        cellInput.type = "number"
        cellInput.defaultValue = entry.value; //Hier haalt hij de values uit.**************
        cellInput.addEventListener("change",function (ev) { //ik snap de (ev) niet die ev kan ik ook weghalen.
            console.log("Input clicked")
            eentjeMeer();
        });
        let textNode = document.createTextNode(entry.value);


        cell.appendChild(entry.editable ? cellInput : textNode); //variablename = (condition) ? value1:value2 
        // Append child CellInput-Number if the entry is editable
       
        cell.className = entry.editable ? "editable" : "";
        row.appendChild(cell);
    })

    table.appendChild(row);
});
console.log("entries" + Object.entries(products));
myTable.appendChild(table);

for (let j = 0; j < products.length; j++) {
    //let row = document.createElement('tr');
}
function getNewinput() {
    const naamValue = document.getElementById('naam').value;
    const waardeValue = document.getElementById('prijs').value;
    const qtyValue = document.getElementById('qty').value;

    return { omschrijving: { value: naamValue },waarde: { value: waardeValue },aantal: { value: qtyValue,total: { value: waardeValue * qtyValue } }
}

const test = []; //naar boven plakken straks
function updateTable() {
    
    const newInput = getNewinput(); //Verwijst naar GET NEW INPUT en pushed de info van die functie naar de test array die UIT HTML word gehaald.

    test.push(newInput); //zie boven

    test.forEach(emp => {
        let row = document.createElement('tr');

        Object.values(emp).forEach(empValue => {
            let cell = document.createElement('td');
            let cellInput = document.createElement("input");
            cellInput.type = "number"
            cellInput.defaultValue = empValue.value;
            cellInput.addEventListener("change",function (ev) {
                console.log("Input clicked")
                eentjeMeer(); //CALLBACK
            });
            let textNode = document.createTextNode(empValue.value);
            

            cell.appendChild(empValue.editable ? cellInput : textNode); //if statements kunnen dus ook zo hier voor appenden
            cell.className = empValue.editable ? "editable" : "";
            row.appendChild(cell);
        })

        table.appendChild(row);

    });

    myTable.appendChild(table);
    //update totaal bedrag
    const total0 = test.reduce((currentTotal,productCal) => {
        return productCal.total.value + currentTotal
    },0)
    const yo = total0.toFixed(2);
    const TotalTable = Number.parseInt(yo) + Number.parseInt(uitslag);
    document.getElementById('totaal').innerHTML = "Totaal bedrag  " + TotalTable;
}

function eentjeMeer() {
 
    Object.values(products).forEach(entry => {
        if (entry.editable = true)
    //console.log(entry.editable.value);
    var inputs = document.getElementsByTagName("input");
    var result = new Array(inputs.length);
    for (var i=0; i<inputs.length; i++)
    if (entry.editable == true)
        result[i] = inputs[i].value; 
        console.log(result);  
        });

/*
for (let i = 0; i < products.length; i++) {
    aantal = products[i].aantal.value;
    waarde = products[i].waarde.value;
    console.log(aantal * waarde);
}              
  */          
}    
    
   

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;
}

#totaal {

    border: 2px solid black;
    background-color: skyblue;
    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 />
    <div id="totaal"></div>
    <script src="demo.js"></script>
</body>
</html>

解决方法

这当然很简单，现在让它来计算总数。但是，这是我自己的问题的答案：

    Object.values(products).forEach(entry => {
var inputs = myTable.getElementsByTagName("input");
var result = new Array(inputs.length);
for (var i=0; i<inputs.length; i++)
    //products[i].total.value = products[i].waarde.value * products[i].aantal.value; 
    result[i] = inputs[i].value;    
    console.log(result);  
    });

因此，我将输入变量myTable用于引用HTML中的表ID。而不是我的文件。我也可以给它一个动态名称，这是我以前没有想过的。

下一步是计算总数，这应该很简单，但是我当然会出错:)祝我好运。 （为什么人们从不回覆我，我在做什么错呢？）