如何从动态 HTML 表中获取特定用户输入数据（Onchange 函数、数值）

Question

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

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

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

我如何正确获取这些数据，以便我可以将其与价格相乘（我的荷兰语 PRIJS 列）

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

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

数组是产品

我正在处理的数字 onchange 函数是 JS 文件下方的 Function 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, editable: true }, total: { value: 0 } }, { omschrijving: { value: "Krentenbollen" }, waarde: { value: 1.20 }, aantal: { value: 4, editable: true }, total: { value: 0 } }, { omschrijving: { value: "Noten" }, waarde: { value: 2.99 }, aantal: { value: 2, editable: true }, 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, editable: true }, 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>

Answer 1

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

    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。 而不是我的文件。 我也可以动态地给它一个类名，这是我以前没有想过的。

下一步是计算总数，这应该很容易，但我当然会出错:) 祝我好运。 （还有为什么人们从不回复我，我做错了什么？）