计算每个动态总计的总和

Question

我想使用以下代码来计算下面的js小提琴中所有总数的总和： http : //jsfiddle.net/hEByw/7/

作为参考，我给出了以下屏幕截图。 总数根据数量*价格动态计算。 我要添加所有总计并显示为总计。 请任何人都可以帮助我。 提前致谢

<script type='text/javascript'>
    //<![CDATA[
    $(window).load(function () {
        var counter = 1;
        $(document).ready(function () {

            //To multiply two textbox values
            $('#qty' + counter).keyup(calculate);
            $(this).keyup(calculate);

            function calculate(e) {
                $('#total' + e.target.title).val($('#qty' + e.target.title).val() * $('#rates' + e.target.title).val());
            }
            $('#btnCalc').click(function () {
                alert($('#qty').val());
            });
            $("#addButton").click(function () {
                if (counter > 27) {
                    alert("Only 27 textboxes allow");
                    return false;
                }
                var newTextBoxDiv = $(document.createElement('div'))
                    .attr("id", 'TextBoxDiv' + counter);
                newTextBoxDiv.after().html('<label>Product #' + counter + ' : </label>' +
                    '<input type="text" size="60" name="product[]" placeholder="Product"\n\
    id="product' + counter + '" value="" title = ' + counter + ' >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n\
    <label>Quantity #' + counter + ' : </label>' +
                    '<input type="text" size="2" title = ' + counter + ' name="qty[]" \n\
    id="qty' + counter + '" value="" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n\
    <label>Rate #' + counter + ' : </label>' +
                    '<input type="text" title = ' + counter + ' size="2" name="rates[]"\n\
    id="rates' + counter + '" value="" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n\
    <label>Total #' + counter + ' : </label>' +
                    '<input type="text" title = ' + counter + ' size="3" name="total[]" id="total' + counter + '" value="" class="txt" onchange="calculate();"> ');

                newTextBoxDiv.appendTo("#TextBoxesGroup");
                counter++;
            });

            $("#removeButton").click(function () {
                if (counter == 0) {
                    alert("No more textbox to remove");
                    return false;
                }

                counter--;

                $("#TextBoxDiv" + counter).remove();
            });
        });

    });//]]>

</script>


<table>
    <tr>
        <td><strong>Select the products</strong>
            <input type='button' value='Add Products' id='addButton'>
            <input type='button' value='Remove Products' id='removeButton'>
        </td>
    </tr>
</table>
<table>
    <tr>
        <td>
            <div id='TextBoxesGroup'></div>
        </td>
    </tr>
    <tr>
        <td>
            <input type="hidden" id="countervalue" name="countervalue" style="display:none;">
        </td>
    </tr>
</table>

Grand Total : <p id="inputSum"></p>

Answer 1

检查此解决方案

http://jsfiddle.net/mgc2f5xj/

添加了一个函数来获取所有项目的总数

function getTotal(){
        var totals = document.getElementsByName("total[]");
      var total = 0;
      for (var i=0; i< totals.length; i++){
            total+= Number(totals[i].value);
      }
      document.getElementById("inputSum").innerText = total;
    }