如何从动态 HTML table 获取特定用户输入数据（Onchange 函数，数字值）
How to get specific user input data from a dynamic HTML table (Onchange function, number values)
我正在尝试从动态 table 的输入字段中获取值。这样，当用户更改数字输入字段中的值时，它会正确计算每行的总数。
到目前为止，我已经从所有输入字段中获取了数据。我只需要 table.
中的那些
我尝试了一些条件语句，因为我只需要产品对象数组中具有 editable 选项的输入字段。 (editable是一个值，这个是为了生成输入域)
如何正确获取此数据以便将其乘以价格（我的荷兰语 PRIJS 专栏）
我认为这很简单，因为我几乎完成了这个项目。但我卡住了 :s
我在这里证明了一个代码笔：https://codepen.io/3lly/pen/YzqYEOY
数组是 Products
我正在处理的数字 onchange 函数是 JS 文件下方的 Function EentjeMeer()。
当然，要查看控制台日志，请先单击一个数字 :) 当我单击第一个时，现在的输出是：
[“4”、“2”、“4”、“2”、“”、“”、“”、“添加产品”]
我只需要前 4 个，剩下的不是 table 而是用户输入字段（然后我希望我可以用这些值轻松更新产品数组）
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>
当然很简单，现在就拿来算总和吧。但这是我自己问题的答案：
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 中的 table ID。而不是我的文件。我也可以动态地给它一个我以前没有想过的类名。
下一步是计算总数，这应该很容易，但我当然会出错 :) 祝我好运。 （还有为什么没人回复我，我哪里做错了？）
我正在尝试从动态 table 的输入字段中获取值。这样，当用户更改数字输入字段中的值时，它会正确计算每行的总数。
到目前为止，我已经从所有输入字段中获取了数据。我只需要 table.
中的那些我尝试了一些条件语句，因为我只需要产品对象数组中具有 editable 选项的输入字段。 (editable是一个值，这个是为了生成输入域)
如何正确获取此数据以便将其乘以价格（我的荷兰语 PRIJS 专栏）
我认为这很简单，因为我几乎完成了这个项目。但我卡住了 :s
我在这里证明了一个代码笔：https://codepen.io/3lly/pen/YzqYEOY
数组是 Products
我正在处理的数字 onchange 函数是 JS 文件下方的 Function EentjeMeer()。 当然，要查看控制台日志，请先单击一个数字 :) 当我单击第一个时，现在的输出是：
[“4”、“2”、“4”、“2”、“”、“”、“”、“添加产品”]
我只需要前 4 个，剩下的不是 table 而是用户输入字段（然后我希望我可以用这些值轻松更新产品数组）
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>
当然很简单，现在就拿来算总和吧。但这是我自己问题的答案：
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 中的 table ID。而不是我的文件。我也可以动态地给它一个我以前没有想过的类名。
下一步是计算总数，这应该很容易，但我当然会出错 :) 祝我好运。 （还有为什么没人回复我，我哪里做错了？）