javascript - 计算 for 循环中输入值的总和

Question

我有一个有 4 列的表格。第一列是产品名称，第二列是每件商品的价格，第三列有一个输入字段，您可以在其中选择所需的商品数量，最后一列计算每件商品的价格 * 商品数量。

此计算有效，但我还想将所有这些计算到表格底部的总计中。

我对 javascript 知之甚少，所以我不确定我是否使用了正确的函数或方法。 代码由 PHP、HTML 和 Javascript 组成。

for ($i = 0; $i < $num_rows; $i++){
  echo '<tr><td>' . $row[$i][0] . '';
    echo '<td id="stkPris_' . $i . '">' . $row[$i][1] . '</td>';
    echo '<td><input type="text" id="antall_' . $i .'" name="antall" size="1" value="0" oninput="calculate(value, this.id)"></td>';
    echo '<td><input type="text" id="pris_' . $i . '" name="pris" size="1" readonly></td></tr>';
}

echo '
    <tr>
            <td><strong>Sum</strong></td>
            <td></td>
            <td></td>
            <td><strong><input type="text" id= "sum" name="sum" size="1" value="0" readonly><strong></td>
    </tr>
</table>';


<script>

    function calculate(value, elementId){
        var i;

        for (i = 0; i < ' . $num_rows . '; i++){

            var stkPris = document.getElementById("stkPris_" + i);
            var antall = document.getElementById("antall_" + i);
            var pris = document.getElementById("pris_" + i);
            var sum = document.getElementById("sum");

            var delsummer = antall.value * stkPris.innerText;

            if(elementId == "antall_" + i){
                pris.value = delsummer;
            }

            sum.value += pris.value;
        }
    }
</script>

How it looks (image)

总数似乎是一个字符串而不是一个数字？我尝试将“每件商品的价格”放入输入中，并使用 .value 而不是 .innerText。没有做任何事情。

Answer 1

这里是一个简单的计算股票和价格的方法，阅读代码注释了解更多。

$(document).ready(function(){
 var totalStock = 0;
 var totalPrice = 0;
 
 $(".stock").each(function(){
  var s = parseInt($(this).text()); // to get the stock count
  var p = parseFloat($(this).parent().find(".price").text()); // to get unit price of this stock
  $(this).parent().find(".sumPrice").html(s*p); // calculate Stock x Price
  totalStock += s; // calculate total Stocks
 });
 
  $(".price").each(function(){
  var p = parseFloat($(this).text()); // to get unit price
  totalPrice += p; // calculate total prices
 });
 
 $(".stockTotal").html(totalStock); // show total stock count
 $(".priceTotal").html(totalPrice); // show total prices
 
 $(".generalTotal").html(totalStock * totalPrice); // calculate all prices x all stock
});

table{
 width:100%;
}

table th, table td{
 border:1px solid #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
 <thead>
  <tr>
   <th>#</th>
   <th>Item</th>
   <th>Stock</th>
   <th>Price</th>
   <th>Sum</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>1</td>
   <td>item name</td>
   <td class="stock">25</td>
   <td class="price">17</td>
   <td class="sumPrice">##</td>
  <tr>
  <tr>
   <td>2</td>
   <td>item name</td>
   <td class="stock">1</td>
   <td class="price">12.5</td>
   <td class="sumPrice">##</td>
  <tr>
  <tr>
   <td>3</td>
   <td>item name</td>
   <td class="stock">6</td>
   <td class="price">9.75</td>
   <td class="sumPrice">##</td>
  <tr>
  <tr>
   <td>4</td>
   <td>item name</td>
   <td class="stock">0</td>
   <td class="price">20</td>
   <td class="sumPrice">##</td>
  <tr>
  <tr>
   <td>5</td>
   <td>item name</td>
   <td class="stock">11</td>
   <td class="price">15</td>
   <td class="sumPrice">##</td>
  <tr>
  <tr>
   <td>6</td>
   <td>item name</td>
   <td class="stock">3</td>
   <td class="price">3.25</td>
   <td class="sumPrice">##</td>
  <tr>
 </tbody>
 <tfoot>
  <tr>
  <td colspan="2"></td>
  <td class="stockTotal">#stock total#</td>
  <td class="priceTotal">#price total#</td>
  <td class="generalTotal">#price total x stock total#</td>
  </tr>
 </tfoot>
</table>