在表中的文本框中获取一行数字，并计算其总数

Question

我有这个表，在最后一列中，文本框中有几行数字。我试图循环浏览这些行，并在文本框中获取每个数字。一旦收集了所有的数字，所有的数字都将被相加。我希望在单击"；计算"；按钮

我试着获取单元格vie-tableName.rows[n].cells[n].inerHTML的内容，但由于文本仍在文本框中，所以这不起作用。我甚至不确定你是否就是这样在表格单元格/中获得文本的

let mealObj = {
menu1: {
menuName: "Steak",
ingr1: {
name: "Butter",
ingrType: "other",
amount: "2",
amountType: "tbsp",
cal: "10",
},
ingr2: {
name: "Parsley",
ingrType: "vegetable",
amount: "1",
amountType: "tsp",
cal: "1",
},
ingr3: {
name: "Garlic",
ingrType: "vegetable",
amount: "1/2",
amountType: "tsp",
cal: "20",
},
ingr4: {
name: "Soy Sauce",
ingrType: "other",
amount: "1/4",
amountType: "tsp",
cal: "20",
},
ingr5: {
name: "Beef",
ingrType: "meat",
amount: "3/4",
amountType: "lbs",
cal: "200",
},
ingr6: {
name: "Salt",
ingrType: "other",
amount: "1/8",
amountType: "tsp",
cal: "0",
},
ingr7: {
name: "Pepper",
ingrType: "other",
amount: "1/8",
amountType: "tsp",
cal: "2",
},
},
}
let ingrTable = document.getElementById("ingr-table");
objToTable(mealObj);
function objToTable(ingrList) {
let totalRowLength = ingrTable.rows.length;
for (let i in ingrList) {
for (let k in ingrList[i]) {
if (ingrList[i][k].name !== undefined) {
let tableAmount = document.createElement("INPUT");
tableAmount.setAttribute("type", "number");
tableAmount.id = "table-amount";
let tableCalNum = document.createElement("INPUT");
tableCalNum.setAttribute("type", "number");
tableCalNum.id = "table-cal";
let row = ingrTable.insertRow(totalRowLength);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = ingrList[i][k].name;
cell2.appendChild(tableAmount);
tableAmount.value = eval(ingrList[i][k].amount);
cell3.innerHTML = ingrList[i][k].amountType;
cell4.appendChild(tableCalNum);
tableCalNum.value = ingrList[i][k].cal;
}
}
}
}
let button = document.getElementById("button");
let calculateBtn = document.createElement("BUTTON");
calculateBtn.innerHTML = "Calculate";
button.appendChild(calculateBtn);
calculateBtn.addEventListener("click", function () {
for (let i = 0; i < ingrTable.rows.length; i++) {
calNum = document.getElementById("table-cal");
console.log(calNum.value);
//console.log(ingrTable.rows[i].cells[3]);
}
});

<div id="button"></div>
<table id="ingr-table">
<tr>
<th>Ingredient</th>
<th colspan="2">Amount</th>
<th>Calorie</th>
<th></th>
</tr>
</table>

Answer 1

这应该做到：

let mealObj = {
menu1: {
menuName: "Steak",
ingr1: {name:"Butter",  ingrType: "other",  amount: "2",  amountType: "tbsp",  cal: "10",},
ingr2: {name:"Parsley",  ingrType: "vegetable",  amount: "1",  amountType: "tsp",  cal: "1",},
ingr3: {name:"Garlic",  ingrType: "vegetable",  amount: "1/2",  amountType: "tsp",  cal: "20",},
ingr4: {name:"Soy Sauce",  ingrType: "other",  amount: "1/4",  amountType: "tsp",  cal: "20",},
ingr5: {name:"Beef",  ingrType: "meat",  amount: "3/4",  amountType: "lbs",  cal: "200",},
ingr6: {name:"Salt",  ingrType: "other",  amount: "1/8",  amountType: "tsp",  cal: "0",},
ingr7: {name:"Pepper",  ingrType: "other",  amount: "1/8",  amountType: "tsp",  cal: "2",},
},
};
const mknum = (str) =>  Function('"use strict";return (' + str.trim().replace(/ +/,"+") + ")")();
const tbl=document.querySelector("#ingr-table tbody");
tbl.innerHTML=Object.values(mealObj.menu1).slice(1).map(r=>
`<tr><td>${r.name}</td><td><input type="text" value="${r.amount}"></td>
<td>${r.amountType}</td><td><input type="text" value="${r.cal}"></td></tr>` ).join("n")
+'<tr><td>Sum</td><td id="asum"></td><td></td><td id="csum"></td></tr>';  
const amnts=[...tbl.querySelectorAll("td:nth-child(2) input")], asum=document.getElementById("asum"),
cals=[...tbl.querySelectorAll("td:nth-child(4) input")],  csum=document.getElementById("csum"),
summation=()=>{ asum.textContent=amnts.reduce((a,c)=>{try{return a+=mknum(c.value)}catch{return a}},0);
csum.textContent=cals.reduce((a,c)=>a+=+c.value,0);};

tbl.addEventListener("input", ev=>ev.target.tagName==="INPUT" && summation() )
summation();

<table id="ingr-table">
<thead>
<tr>
<th>Ingredient</th>
<th colspan="2">Amount</th>
<th>Calorie</th>
</tr>
</thead>
<tbody></tbody>              
</table>

我试图使amounts列的求和尽可能稳定，但很明显，添加不同单位的数字根本没有意义！因此，这只能被视为"；好玩的运动；没有任何真正的目的。

函数mknum()将尝试将以整数+blank+小数部分的形式给出的分数转换为数值。如果字符串以/开头或结尾，它将失败。对于这些情况，我构建了try{..} catch{..}构造。