我需要在用户输入值时动态查找用户输入值的总和,并自动显示值的总和
i need to find the sum of user entered values dynamically as user enters the values and display the sum of values autometically
var sum = 0;
$('.numbers').each(function() {
sum += parseInt($.text(this), 10);
});
$('.total').text(sum);
我尝试了上面的代码,但它不适用于动态值作为用户动态输入值。我需要我的代码来动态计算用户输入的值,并在用户输入值时显示值的总和,而不管输入的数量如何。
你可以使用这样的东西
.HTML
<table>
<thead>
<th>Item</th>
<th>Cost</th>
</thead>
<tbody id="tbody">
<tr>
<td>Item 1</td>
<td>
<input type="text" class="elm" />
</td>
</tr>
<tr>
<td>Item 2</td>
<td>
<input type="text" class="elm" />
</td>
</tr>
<tr>
<td>Item 3</td>
<td>
<input type="text" class="elm" />
</td>
</tr>
<tr>
<td>Item 4</td>
<td>
<input type="text" class="elm" />
</td>
</tr>
<tr>
<td>Item 5</td>
<td>
<input type="text" class="elm" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>
<label id="total">0</label>
</td>
</tr>
</tfoot>
jQuery
$('body').on('keyup','.elm',function(e){
//Check Key Press is Enter
if (e.keyCode != 13) {
var sum = 0;
$('.elm').each(function() {
if($(this).val() != '' && !isNaN($(this).val())){
sum += parseInt($(this).val());
}
});
$('#total').text(sum);
}
else{
var itemNum = $('#tbody tr').length + 1;
var newRow = '<tr>'+
'<td>Item'+itemNum+'</td>'+
'<td>'+
'<input type="text" class="elm">'+
'</td>'+
'</tr>';
$('#tbody').append(newRow);
}
});
您还可以使用 jQuery 的克隆函数从表中克隆 TR。那就靠你了。
小提琴
http://jsfiddle.net/hoja/y7ny6r5n/5/
你的语法有点不对劲,应该是:
var sum = 0;
$('.numbers').each(function() {
sum += parseInt($(this).val());
});
$('.total').text(sum);
对于表单元素(<input>
,<textarea>
),你应该使用.val()
方法来获取输入内容。
完整代码:
var sum = 0;
$('.numbers').each(function() {
sum += parseInt($(this).val(), 10);
});
$('.total').text(sum);
相关文章:
- 使用javascript搜索具有用户输入的数组
- React Native通过Navigator将用户输入数据传递到选项卡栏IOS中的组件
- 我想在AngularJS应用程序中创建一个输入数字框,用户不应该在该框上键入十进制数字.(一个整数输入框)
- 如何使用JavaScript中的用户输入创建序列/序列
- 如何在用户输入时实例化数组
- 如何从客户端的数组中获取用户输入和返回值
- 如何在用户输入 javascript 时更改值
- 如何从多个不同的html页面获得mongodb文档的用户输入
- 阻止用户将脚本输入wordpress post
- PayPal按钮是否有一个简单的选项,其中金额基于一些用户输入
- 从表单中获取用户输入执行计算(操作顺序)并输出回该表单
- 我确实有一个表单,如果用户输入了输入,它应该检查否定或空的输入框,并抛出一条警告消息
- 用于输入用户信息的动态PHP代码
- 在MongoDB中输入用户名数组,并返回相同大小的id数组,对于不存在的用户名为null或false
- 如何通过文本字段输入用户数据,然后在文本字段的正下方显示
- 脚本自动输入用户凭据
- 如何获取用户文本输入用户创建输入的值,jQuery
- 在网站服务器上存储表单/输入/用户首选项数据有哪些不同的方法?
- 使用if语句输入用户文本
- 不能在indexedDB中输入用户信息后立即提取用户信息