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返回一个字符串。

在减去类似下面的数据之前将它们转换为数字

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

Answer 5

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

修复了html（示例..我选择使用类名为div的{{1}}）：

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显示为收据减去返回。如果用户输入非数字数据，则在计算之前将该值默认为0.

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

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

5 个答案: