将总函数添加到多行

Question

我有4个名为item，price，quantity和total的字段。我想要做的就是计算每一行的总计（价格*数量）和总计在所有行中添加“总计”字段的总计。

我的剧本是，

<script type="text/javascript">
function calculateSum() {
    var sum = 0;
    $(".price").each(function() {
        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }
    });
    $("#sum").html('&pound;' + sum.toFixed(2));
}
$(document).ready(function(){       
    $('.del').live('click',function(){
        $(this).parent().parent().remove();
    });
    $('.add').live('click',function(){
        $(this).val('Delete');
        $(this).attr('class','del');
        var appendTxt = "<tr><td><input name='item[]' type='text' size='40' /></td><td><input name='qty[]' type='text' size='5' value='0' /></td><td><input class='price' name='price[]' id='price' type='text' size='20' value='0.00' /></td><td><input name='total[]' class='total' id ='total' type = 'text' size='50' value='0'></td><td><input type='button' class='add' value='Add Row' /></td></tr>";
        $("tr:last").after(appendTxt);  
    });
    $('.price').live('keyup', function() {
        calculateSum();
    });         
});
</script>

我的HTML是，

<table id="options-table">                   
        <tr>
            <td>Item</td>
            <td>Qty</td>
            <td>Price</td>
            <td>Total</td>
            <td>&nbsp;</td>
        </tr>                  
        <tr>
            <td><input name="item[]" type="text" size="40" /></td>
            <td><input name="qty[]" type="text" value="0" size="5" /></td>
            <td><input name="price[]" class="price" id="price" type="text" value="0.00" size="20" /></td>
            <td><input name="total[]" class="total" id ="total" type = "text" size="50"></td>
            <td><input type="button" class="add" value="Add Row" /></td>

        </tr>
    </table>
    <br /><br />
    <div id="sum">&pound;0.00</div>

我得到的只是所有价格字段的总和。如何对每行和总计应用求和函数。请有人帮助我实现这一目标。

Answer 1

我希望能够理解......计算每一行的总数（如果添加的话，也是新的行）。

你需要对HTML进行一些重构：

1. 不使用唯一身份证明（因为您需要添加更多与您相同的表单） - id="price" id="total"将其删除。
2. 在名为qty的字段上添加类qty[]（我更喜欢查找元素）

添加一个新函数来计算每行的总数：

  function calculateTotal(){
    $("#options-table tr").not(":eq(0)").each(function(){ //.not(":eq(0)") first is header of table
        var pr = parseInt($(this).find(".price").val());
        var q = parseInt($(this).find(".qty").val());
        $(this).find(".total").val(pr*q); 
    });
  }

每次调用此函数时，js都会计算所有行的总和。

这对于计算只有一个：

  function calculateRowTotal($row){ // $row must be one of your $("tr")
        var pr = parseInt($row.find(".price").val());
        var q = parseInt($row.find(".qty").val());
        $row.find(".total").val(pr*q); 
  }

所有代码，包含一些修改：

HTML：

<table id="options-table">                   
    <tr>
        <td>Item</td>
        <td>Qty</td>
        <td>Price</td>
        <td>Total</td>
        <td>&nbsp;</td>
    </tr>                  
    <tr>
        <td><input name="item[]" type="text" size="40" /></td>
        <td><input name="qty[]" class="qty" type="text" value="0" size="5" /></td>
        <td><input name="price[]" class="price" type="text" value="0.00" size="20" /></td>
        <td><input name="total[]" class="total" type = "text" size="50"></td>
        <td><input type="button" class="add" value="Add Row" /></td>
    </tr>
</table>
<br /><br />
<div id="sum">&pound;0.00</div>

JS：

function calculateSum() {
    var sum = 0;
    $(".total").each(function() {
        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }
    });
    $("#sum").html('£' + sum.toFixed(2));
}
function calculateTotal(){
    $("#options-table tr").not(":eq(0)").each(function(){ //.not(":eq(0)") first is header of table
        var t = parseInt($(this).find(".price").val()) * parseInt($(this).find(".qty").val());
        if(isNaN(t)) return alert("insert only number inside of fileds, please");
        $(this).find(".total").val(t); 
    });
  }
$(document).ready(function(){       
    $('.del').live('click',function(){
        $(this).parent().parent().remove();
    });
    $('.add').live('click',function(){
        $(this).val('Delete');
        $(this).attr('class','del');
        var appendTxt = "<tr><td><input name='item[]' type='text' size='40' /></td><td><input name='qty[]' type='text' size='5' value='0' /></td><td><input class='price' name='price[]' id='price' type='text' size='20' value='0.00' /></td><td><input name='total[]' class='total' id ='total' type = 'text' size='50' value='0'></td><td><input type='button' class='add' value='Add Row' /></td></tr>";
        $("tr:last").after(appendTxt);  
    });
    $('.price, .qty').on('change', function() {
        calculateTotal();
        calculateSum();
    });         
});

Answer 2

我让我的脚本为每个字段提供唯一的ID

 <script type="text/javascript">
    function calculateSum() {
        var sum = 0;
        $(".price").each(function() {
            //add only if the value is number
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }
        });
        $("#sum").html('&pound;' + sum.toFixed(2));
    }
    $(document).ready(function(){       
        $('.del').live('click',function(){
            $(this).parent().parent().remove();
        });
        $('.add').live('click',function(){
            $(this).val('Delete');
            $(this).attr('class','del');
            var appendTxt = "<tr><td><input name='item[]' type='text' size='40' /></td><td><input name='qty[]' type='text' size='5' value='0' /></td><td><input class='price' name='price[]' id='price' type='text' size='20' value='0.00' /></td><td><input name='total[]' class='total' id ='total' type = 'text' size='50' value='0'></td><td><input type='button' class='add' value='Add Row' /></td></tr>";
            $("tr:last").after(appendTxt);  
        });
        $('.price').live('keyup', function() {
            calculateSum();
        });         
    });
    </script>
</head>

正在工作!!将jquery 1.9.1库文件添加到上面的代码中。