如何對多個輸入乘以值同時求和

Question

所以，我有這個小提琴 ，那里有一個帶有輸入和成本的表。 它還有一些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生成的，我只是復制並粘貼了為小提琴生成的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>

這是創建表的網站上的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>

這是表格的前10行的圖片。

如果必須在其中進行某些更改，那完全沒問題，我只是希望保持可讀性並減少冗余。
謝謝

Answer 1

這是您更新的小提琴： https : //jsfiddle.net/737v3qxr/2/

所以我改變了幾件事：

$( ".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，以使其更易於跟蹤。

<input id="total" type="text" readonly id="printchatbox" name="total">

還有一些奇怪的空文本，我認為這是指您的php，但您必須自己處理。

<input class="total" name="45" value="" ""="" type="number">

Answer 2

您還可以使用事件處理程序參數：

$( ".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;
});