如何從動態 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。 而不是我的文件。 我也可以動態地給它一個類名，這是我以前沒有想過的。

下一步是計算總數，這應該很容易，但我當然會出錯:) 祝我好運。 （還有為什么人們從不回復我，我做錯了什么？）