[英]javascript how to calculate values in dynamically added fields with multiple rows
I had one row with three fields: received, issue, balance
我有一行有三个字段: received, issue, balance
<input type="text" name="rcv" class="rcv"/>
<input type="text" name="issue" class="issue"/>
<input type="text" name="blnc" class="balance"/>
I calculated the balance for each row easily, but how do I calculate more than one row? 我很容易计算出每行的余额,但是如何计算多行呢?
Each row has receive
, issue
and balance
fields. 每行都有receive
, issue
和balance
字段。
How do I calculate each row's balance field? 如何计算每一行的余额字段?
I tried like this for multiple row but it's not working: 我尝试过这样多行,但它不起作用:
$('.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);
});
you need to parse The value of textbox as it returns string not int 你需要解析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);
});
If your code is being run on document.ready it will only be applied to elements which exist at that point. 如果您的代码正在document.ready上运行,它将仅应用于此时存在的元素。
You'd be better with : 你会更好:
$(document).on('blur','.t_rtn, .t_rcv',function(){
var val = $(this).val();
...
});
try this.. 尝试这个..
$(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);
});
I think problem is because you are subtracting 2 Strings. 我认为问题是因为你减去2个字符串。 .val
returns an String. .val
返回一个String。
Convert them in number before subtracting like bellow 在减去类似波纹之前将它们转换为数字
$('t_rtn').next('.consume').val((+totalRcv)-(+totalRtn));
In addition to parsing the string values into integers you also need to use the correct selectors for those input elements. 除了将字符串值解析为整数之外,还需要为这些输入元素使用正确的选择器。 t_rtn
is not the right class name, for example. t_rtn
不是正确的类名。 And if doing this in rows you will want to grab the correct element from the current row (you already did this correctly for the consume field) 如果在行中执行此操作,您将需要从当前行中获取正确的元素(您已经为使用字段正确执行了此操作)
Fixed html (Example.. I chose to use div
with class name = row
): 修复了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>
Fixed code: 固定代码:
$(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);
});
I took the liberty of fixing some inconsistencies with the class names used. 我冒昧地修复了所使用的类名的一些不一致。 I tried to match them up to the variables for totalRcv
and totalRtn
so that now the balance
shows as receipt minus return. 我试图将它们与totalRcv
和totalRtn
的变量相totalRcv
,以便现在balance
显示为收据减去返回。 If the user enters non-numeric data, it defaults the value to 0 before calculating. 如果用户输入非数字数据,则在计算之前将该值默认为0。
Example fiddle here: http://jsfiddle.net/cp81g4nf/1/ 示例小提琴: http : //jsfiddle.net/cp81g4nf/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.