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

Question

I have a table with 4 columns. The first one is the name of a product, the second has the price per item, the third column has an input field where you can choose how many items you want, and the last column calculates the price per item * number of items.

This calculation works, but I also want to calculate all of these into a total at the bottom of the table.

I know very little javascript, so I'm not sure if I'm using the correct functions or methods. The code consists of PHP, HTML and 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)

The total seem to be a string and not a number? I have tried putting the "price per item" into an input instead and use .value instead of .innerText. Didn't do anything.

Answer 1

Here is a simple way to calculate stock and price, read code comments to know more.

 $(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>