Javascript 如何将多个输入与值同时相乘求和

所以，我有一个表，有一个输入和一个成本。它还有一点jquery

$( ".total" ).change(function() {
    i = 1;
var input001 = document.getElementsByName(i)[0];
var cost001 = document.getElementById("cost" + i);
var total001 = input001.value * cost001.innerHTML;
 var num = total001;
 var total = num.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "1,");
  document.getElementById("printchatbox").value = total;
  i++;
});

此代码将第一次输入乘以第一项成本。我想找到一种方法，重复这45次（一个项目），而不复制和粘贴此代码45次。。。如果这是唯一的方法，我可以做到。。。但我希望能学到一些东西，同时让我的代码大大缩短。这个表是由php生成的，我只是复制并粘贴了为fiddle生成的html

 while($row = $result->fetch_assoc()) {
        $row['ItemID'] = ltrim($row['ItemID'], '0');
        ?>
            <tr>
                <td><input type="number" class="total" name="<?php echo $row['ItemID']?>" value "<?= isset($_POST[$row['ItemID']]) ? htmlspecialchars($_POST[$row['ItemID']]) : "" ?>"></td>
                <td><?php echo $row['ItemID']?></td>
                <td><?php echo $row['ItemDescription']?></td>
                <td id="<?php echo 'cost' . $row['ItemID'] ?>"><?php echo $row['ItemCost']?></td>
                <td id="<?php echo 'value' . $row['ItemID'] ?>"><?php echo $row['ItemValue']?></td>
            </tr>
            <?php
            }
            ?>
            </table>

while（$row=$result->fetch_assoc（））{
$row['ItemID']=ltrim（$row['ItemID']，'0'）；
?>

这是网站上创建表的PHP代码。。。 这是html表的第一行

<tbody><tr>
                 <td><input class="total" name="1" value="" ""="" type="number"></td>
                <td>1</td>
                <td>Barrel Wrap 47"x31"</td>
                <td id="cost1">39.38</td>
                <td id="value1">47.25</td>
            </tr>

1.
桶形包装47英寸x31英寸
39.38
47.25

这是表格前10行的图像。

如果我必须修改其中的某些内容，这完全没问题，我只是希望保持可读性并减少冗余。

---

谢谢

这是您最新的小提琴：

所以我改变了一些事情：

$( ".total" ).change(function() {
    var name = this.name;
  var quantity = this.value;
    var cost = document.getElementById("cost" + name).innerHTML;
    var total = quantity * cost;
  items[name] = {cost, quantity}
    new_total();
});

当您将函数/侦听器应用于某个对象时，

this

引用元素本身，因此您不需要对其执行额外的i和i++操作

我还介绍了JSON（它基本上是任何其他语言的字典），它有助于跟踪价格

大多数代码只是重命名，因为您的逻辑实际上并不太遥远，只是非常笨拙和复杂

我还添加了一个

new_total

函数，它本身并不需要是函数，但这只是我的偏好

最后，我在您的总数中添加了一个id，以便于跟踪

还有一些奇怪的空文本，我假设它指的是你的php，但你必须自己处理

---

您也可以使用事件处理程序参数：

$( ".total" ).change(function(e) {
    var cost001 = document.getElementById("cost" + e.target.name);
    var total001 = e.target.valueAsNumber * Number(cost001.innerHTML);
    var prev = Number(document.getElementById("printchatbox").value);
  document.getElementById("printchatbox").value = total001 + prev;
});

---

给我们一小部分最终表格的外观（在没有php的浏览器上）