我正在尝试计算每行的输入val()
,目前只计算第一行请帮助,谢谢!
HTML
<a href="#" class="new">new</a>
<ul class="container"></ul>
<span class="all"></span>
JS
$('.new').click(function(){
$("ul").append('<li><input type="text" class="inputA"/><input type="text" class="inputB"/><p>total:<span></span></p></li>');
});
$('.container').on('keyup', 'input', function(){
var a = 0;
var b = 0;
var c = 0;
var d = 0;
$('ul li').each(function(){
$(this).parent().find('li input').each(function(){
a = parseInt($('.inputA').val());
b = parseInt($('.inputB').val());
c = a+b;
$(this).parent().find('p span').html(c);
});
d += c;
});
$('.all').html(d);
});
答案 0 :(得分:1)
使用
$('.new').click(function () {
$("ul").append('<li><input type="text" class="inputA"/><input type="text" class="inputB"/><p>total:<span></span></p></li>');
});
$('.container').on('keyup', 'input', function () {
var d = 0;
$('.container li').each(function () {
var $this = $(this),
a = parseFloat($this.find('.inputA').val()) || 0,
b = parseFloat($this.find('.inputB').val()) || 0
var subTotal = a + b;
$this.find('span').text(subTotal);
d += subTotal;
})
$('.all').html(d);
});
演示:Fiddle
答案 1 :(得分:1)
$('.new').click(function () {
$("ul").append('<li><input type="text" class="inputA"/><input type="text" class="inputB"/><p>total:<span></span></p></li>');
});
$('.container').on('keyup', 'input', function () {
var total = 0;
$('ul li').each(function () {
var a = parseInt($(this).find('.inputA').val(), 10) || 0;
var b = parseInt($(this).find('.inputB').val(), 10) || 0;
$(this).find('p span').html(a + b);
total += (a + b);
});
$('.all').html(total);
});
<强> jsFiddle example 强>
答案 2 :(得分:0)
以下是我提出的建议:
$('.new').click(function () {
$("ul").append($('<li>', {
html: [
$('<input>', {class: 'inputA'}),
$('<input>', {class: 'inputB'}),
$('<span>', {class: 'total'})
]
}).data('total', 0)); //set list item total to ZERO
});
$('.container').on('keyup', 'input', function () {
var other_input = $(this).siblings('input');
var totalEl = $(this).siblings('.total');
var total = parseInt(this.value);
var list_item = $(this).parents('li');
total += parseInt(other_input.val());
totalEl.text(total); //show new total
list_item.data('total', total); //set list item's total
var real_total = 0;
var allEl = $('.all');
list_item.parent().find('li').each(function(){
var t = $(this).data('total');
real_total += t;
}); //tally up all list item totals
allEl.text(real_total); //display the total total
});
答案 3 :(得分:0)
简洁版。包含一些代码来自动处理新行作为奖励。
$('.new').click(function () {
$("ul").append('<li><input type="text" class="inputA"/><input type="text" class="inputB"/><p>total:<span></span></p></li>');
});
$(document).on("blur","input.inputB",function () {
$('.new').click();
});
$('.container').on('keyup', 'input', function (e) {
//var code = e.keyCode || e.which;
var d = 0;
$('ul li').each(function () {
a = parseInt($(this).find('input.inputA').val());
b = parseInt($(this).find('input.inputB').val());
c = a + b;
$(this).find('p span').html(c);
d += c;
});
$('#all').html(d);
});