每次文本更改時運行一個長循環

我有一個表格，其中有一些空的文本框。當用戶輸入值時，小計和總計應該實時更改。但是我的代碼不起作用。每次文本更改時運行一個長循環

下面是一個嘗試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; 

      }); 
});

而且如何使這個與績效工作的一大桌。

來源

2014-02-06 user3279259

我假設你的意思是綁定到鍵盤events..as你想要的總更新用戶的類型。你需要將你的更新函數綁定到'onkeyup'事件。這個.each函數只在加載時運行一次，但不會監聽任何用戶交互。查看jQuery的.on函數http://api.jquery.com/on/ –

想必有一些元素（跨度？文本框？），您想要顯示小計。假設這是一個帶有「小計」id的跨度，然後將該項目文本設置爲小計只是多了一個行：基於OP小提琴

$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)); }); });

更新

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

來源

2014-02-06 16:54:41 Faust

我有一個jsfiddle它http://jsfiddle.net/Jht5j/和似乎沒有任何工作。可能是我需要一雙新鮮的眼睛來查看我的代碼並修復它。我已經空白了。所以如果你可以在我的小提琴中展示給我，那會很棒！ – user3279259

@user：好的，我的腳本完全運行在：http://jsfiddle.net/mhfaust/Jht5j/4/ – Faust

@user：一個更多的修復（總計被打破）：http://jsfiddle.net/mhfaust/Jht5j/5/ – Faust

當用戶數量和速度進入值，小計和總應在實時變化。

試試這個，

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 
      }); 
}); 
});

來源

2014-02-06 17:52:33 dhana

每次文本更改時運行一個長循環

回答

相關問題