複数の入力を同時に値で乗算する方法

Question

したがって、入力とコストを持つテーブルを持つ This Fiddleがあります。それはまた、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回（各項目ごとに1回）繰り返す方法を見つけたいと思います...それがそれを行う唯一の方法なら、私はそれを行うことができます...しかし私は何かを学び、私のコードを同時に短くすることを望んでいます。このテーブルは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; 
});