javascript如何计算具有多行的动态添加字段中的值

Question

我有一行有三个字段： received, issue, balance

<input type="text" name="rcv" class="rcv"/>
<input type="text" name="issue" class="issue"/>
<input type="text" name="blnc" class="balance"/>

我很容易计算出每行的余额，但是如何计算多行呢？

每行都有receive ， issue和balance字段。

如何计算每一行的余额字段？

我尝试过这样多行，但它不起作用：

    $('.t_rtn, .t_rcv').each(function(){
    $(this).on('blur',function(){
      var totalRcv = $('.t_rcv').val();
      var totalRtn = $('.t_rtn').val();
      // console.log( $('t_rtn').next('.consume').val() );
      $('t_rtn').next('.consume').val(totalRcv-totalRtn);
    });

Answer 1

你需要解析textbox的值，因为它返回的字符串不是int

 $('.t_rtn, .t_rcv').each(function(){
    $(this).on('blur',function(){
      var totalRcv = parseInt($('.t_rcv').val()) || 0;
      var totalRtn = parseInt($('.t_rtn').val()) || 0;
      // console.log( $('t_rtn').next('.consume').val() );
      $('t_rtn').next('.consume').val(totalRcv-totalRtn);
    });

Answer 2

如果您的代码正在document.ready上运行，它将仅应用于此时存在的元素。

你会更好：

$(document).on('blur','.t_rtn, .t_rcv',function(){
  var val = $(this).val();

  ...
      });

Answer 3

尝试这个..

 $(document).on('blur','.receive, .return', function()
 {
    var $row = $(this).closest(".row");
    var totalRcv = parseInt($row.find('.receive').val()) || 0;
    var totalRtn = parseInt($row.find('.return').val()) || 0;
    $row.find('.balance').val(totalRcv - totalRtn);
 });

Answer 4

我认为问题是因为你减去2个字符串。 .val返回一个String。

在减去类似波纹之前将它们转换为数字

$('t_rtn').next('.consume').val((+totalRcv)-(+totalRtn));

Answer 5

除了将字符串值解析为整数之外，还需要为这些输入元素使用正确的选择器。 t_rtn不是正确的类名。 如果在行中执行此操作，您将需要从当前行中获取正确的元素（您已经为使用字段正确执行了此操作）

修复了html（示例..我选择使用div ，类名= row ）：

<div class='row'>
<input type="text" name="rcv" class="receive"/>
<input type="text" name="issue" class="return"/>
<input type="text" name="blnc" class="balance"/>
</div>
<div class='row'>
<input type="text" name="rcv" class="receive"/>
<input type="text" name="issue" class="return"/>
<input type="text" name="blnc" class="balance"/>
</div>
<div class='row'>
<input type="text" name="rcv" class="receive"/>
<input type="text" name="issue" class="return"/>
<input type="text" name="blnc" class="balance"/>
</div>

固定代码：

 $(document).on('blur','.receive, .return', function()
 {
    var $row = $(this).closest(".row");
    var totalRcv = parseInt($row.find('.receive').val()) || 0;
    var totalRtn = parseInt($row.find('.return').val()) || 0;
    $row.find('.balance').val(totalRcv - totalRtn);
 });

我冒昧地修复了所使用的类名的一些不一致。 我试图将它们与totalRcv和totalRtn的变量相totalRcv ，以便现在balance显示为收据减去返回。 如果用户输入非数字数据，则在计算之前将该值默认为0。

示例小提琴： http ： //jsfiddle.net/cp81g4nf/1/