如何總結多個輸入乘以價值

所以，我有 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次...如果這是唯一的方法來做到這一點，我可以做到這一點......但我希望學習一些東西，同時使我的代碼顯着縮短。這張表是由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>

這是創建表... 這是HTML表格的第一行的網站上的PHP代碼。

<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行的圖片。

，如果我必須要改變的東西在裏面，那就是完全好，我只是希望保持可讀性，並減少冗餘。
感謝

來源

2017-03-02 Sharkn8do

給我們帶來什麼樣的決賽桌看起來像是一小部分。（在沒有php的瀏覽器上） –

這是你更新的提琴：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">

來源

2017-03-03 00:02:35

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

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

來源

2017-03-03 00:12:06

如何總結多個輸入乘以價值

回答

相關問題