0

我创建了一张发票。我放了 3 个字段：数量、费率和总金额。总金额按照此格式计算（数量*费率）。所有总金额总和显示在 Sub_total div 上。这是我的代码：

    <html>
    <head>
        <title>Invoice</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">

    $(document).ready(function(){

        $(".qty").each(function() {

            $(this).keyup(function(){
                calculateSum();
            });
        });

      $(".rate").each(function() {

            $(this).keyup(function(){
                calculateSum();
            });
        });


    });

    function calculateSum() {

    var qty = 1;
        $(".qty").each(function() {

            if(!isNaN(this.value) && this.value.length!=0) {
                qty = parseFloat(this.value);
            }

        });

                var rate = 0;
        $(".rate").each(function() {
           if(!isNaN(this.value) && this.value.length!=0) {
                rate = parseFloat(this.value);
            }

        });

        $('input[name=total_amount]').val(qty.toFixed(2)*rate.toFixed(2));
    }
</script>
        <style type="text/css">
table
{
    border: 1px solid black;
    border-bottom: none;
    width: 600px;
}


td
{
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    padding:5px 5px 5px 5px;
}
#first
{
    border-left: none;
    border-bottom: 1px solid black;
}
        </style>
    </head>
    <body>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td id="first">Quantity</td>
                <td>Rate</td>
                <td>Total Amount</td>
            </tr>
            <?php
            $num=4;
            for ($i=0; $i<$num; $i++)
            {
                echo "
             <tr>
                 <td id='first'><input class='qty' type='text' name='qty[]'/></td>
                <td><input class='rate' type='text' name='rate[]'/></td>
               <td><input class='total_amount' type='text' name='total_amount[]'/></td>
            </tr>";
            }
            ?>
                        <tr>
                            <td id="first" colspan="2" align="right">Sub Total:</td>
            <td><span id="sub_total">0</span></td>
            </tr>
                 </table>

    </body>
</html>

我想以这种方式显示每个总金额

total_amount[1]=(qty[1]*rate[1])
total_amount[2]=(qty[1]*rate[1])
total_amount[3]=(qty[1]*rate[1])
total_amount[4]=(qty[1]*rate[1])

我很努力，但我的代码不能正常工作。所以请有人帮我解决这个问题。

4

2 回答 2

0

您不需要首先使用 $.each 分配事件..

$('.qty , .rate').keyup(function() {
    calculateSum($(this).closest('tr'));
});

function calculateSum($tr) {
   var $qty =  $tr.find('.qty').val();
   var $rate = $tr.find('.rate').val();
   $tr.find('.total_amount').val(  parseFloat($qty).toFixed(2)* parseFloat($rate).toFixed(2) )
}

这应该足够了

于 2012-10-03T06:02:09.930 回答
0 
$(document).ready(function(){
    $(".qty, .rate").keyup(function(){
        calculateSum();            
    });
});

function calculateSum() {
    var qty = [];
    $(".qty").each(function() {
            var num = parseFloat(this.value) || 1;
            qty.push(num);
    });

    var rate = [];
    $(".rate").each(function() {
            var num = parseFloat(this.value) || 0;
            rate.push(num);
    });
    var sub_total = 0;
    $('input[name=total_amount]').each(function(i){
        var amount = qty[i].toFixed(2)*rate[i].toFixed(2);
        total += amount;
        $(this).val(amount);
    }
    $("#sub_total").text(total);
}
于 2012-10-03T06:14:07.757 回答