gpt4 book ai didi

javascript - 在javascript中计算表最后一列中输入值的总和

转载 作者:行者123 更新时间:2023-12-01 00:51:37 25 4
gpt4 key购买 nike

对表格最后一列中的动态输入值进行求和。如果我对数值进行硬编码,那么计算就可以正常工作。如果我使用 a 输入自己的值,我会得到 NaN

我用过

我的 html 表在加载时添加,并根据需要通过按钮添加行。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body>
<table id='table' border="1">
<tr>
<th>RO#</th>
<th>Work</th>
<th>Time</th>
</tr>
<tr>
<td>615235</td>
<td>lof, rotate</td>
<!-- <td>23</td> -->
<td><input type="number" /></td>
</tr>
<tr>
<td>6154879</td>
<td>engine, trans</td>
<!-- <td>23</td> -->
<td><input typ="number" /></td>
</tr>
<tr>
<td>6158978</td>
<td>rotate, serp belt, timing belt</td>
<!-- <td>23</td> -->
<td><input type="number" /></td>
</tr>
</table>

<br>

<button onclick='calculate()'>Calculate</button>

<script>
function calculate() {
let tbl = document.getElementById('table'),
sumVal = 0;

for (let i = 1; i < tbl.rows.length; i++) {
sumVal = sumVal + parseInt(tbl.rows[i].cells[2].input);
}

console.log(sumVal);
}
</script>


</body>
</html>

我得到NaN当使用<td><input type="number or type="text"><td>时代码

最佳答案

问题是 tbl.rows[i].cells[2] 中不存在 input 属性。老实说,我不知道是否可以从您尝试使用的表格单元格集合中获取输入值。

我建议采用这种方法,使用querySelectorAll,我们在其中指定我们想要从中获取数据的输入:

function calculate() {
let tbl = document.querySelectorAll("table input[type='number']"),
sumVal = 0;

for (let i = 0; i < tbl.length; i++) {
sumVal += Number(tbl[i].value);
}
console.log(sumVal);
}

关于javascript - 在javascript中计算表最后一列中输入值的总和,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56924477/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com