计算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>

它的外观（图像）

总数似乎是一个字符串而不是一个数字？ 我尝试将“每件商品的价格”放入输入中，并使用 .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>