Question

我有一个包含一些空文本框的表。当用户输入值时，小计和总计应实时更改。但是我的代码无效。

这是一次尝试fiddle

$rows.each(function(index) {
            $rows.children("td").each(function() { 
                qty = $("td:nth-child(2) input").val();
                rate = $("td:nth-child(3) input").val();
                amount = qty * rate;
                subtotal = amount;

            });
});

此外，如何使使用大表的性能。

Answer 1

大概有一些元素（span？text-box？）你想要显示小计。让我们说这是一个id为'sub-total'的跨度，然后你将那些项目文本设置为小计只有一个更多行：

<击>

$rows.each(function(index) {

    var $row = $(this);

    $row.on('input', 'change', function(){

        qty =  $row.find("td:nth-child(2) input").val();
        rate = $row.find("td:nth-child(3) input").val();            

        //convert the inputs to integers before multiplying, 
        //just to be sure
        $('#sub-total').text(parseInt(qty) * parseInt(rate));   
    });


});

<击>

基于OP小提琴更新

var $rows = $("#tbl tbody tr");
$(".amount").attr('readonly');
$(".total").attr('readonly');

$rows.each(function(index) {

    var $row = $(this);

    $row.find('input').on('change', function(){

        var qty =  $row.find("td:nth-child(2) input").val();
        var rate = $row.find("td:nth-child(3) input").val();   

        //convert the inputs to integers before multiplying, 
        var sub = parseInt(qty) * parseFloat(rate);

        //only update the totals if the product is a number:
        if(!isNaN(sub)){

            $row.find('.total').val(sub);  

            var gTotal  = 0;

            $(".total").each(function(){
                var t = parseFloat($(this).val());
                gTotal += isNaN(t) ? 0 : t;
            });

            $('#grand_total input').val(gTotal)            
        }  
    });
});

小提琴here

Answer 2

当用户在数量和费率中输入值时，小计和总数应实时更改。

试试这个，

Demo

$(document).ready(function(){
var $rows = $("#tbl tbody tr");
$(".amount").attr('readonly');
$(".total").attr('readonly');


$("input").keyup(function(){
    if($(this).closest('td').index() == 1){
    amount = parseInt($(this).val()) * parseInt($(this).closest('td').next('td').find('input').val())
   $(this).closest("tr").find("td:nth-child(4) input").val(amount);
        $(this).closest("tr").find("td:nth-child(5) input").val(amount);
    };
     alert('');
    if($(this).closest('td').index() == 2){
    amount = parseInt($(this).val()) * parseInt($(this).closest('td').prev('td').find('input').val())
   $(this).closest("tr").find("td:nth-child(4) input").val(amount);
        $(this).closest("tr").find("td:nth-child(5) input").val(amount);
    };
    var total = 0;
    $('td:nth-child(5) input').each(function(i, val){

                                    if($(this).closest('td').attr('id') != "grand_total" && parseInt(this.value) != NaN){
                                    total += parseInt($(this).val());
                                    }
                                    });

   $('#grand_total input').val(total)

});

$rows.each(function(index) {
            $rows.children("td").each(function() { 
                qty = $("td:nth-child(2) input").val();
                rate = $("td:nth-child(3) input").val();
                amount = qty * rate;
                subtotal = amount;

                // populate respective fields
                $("td:nth-child(4) input").val(amount);
                $("td:nth-child(5) input").val(amount);
                // how to calculate grand total
            });
});
});

每次文本更改时运行一个长循环

2 个答案: