Question

我创建了4行，每行包含3个文本框textbox1 + textbox2 = answer所有具有不同类的文本最后有一个文本框，它将汇总该行中的所有文本框值并显示最终答案但截至目前为止小提琴你可以看到，在最后一个文本框中，答案是错误的，它是添加值而不是总和，如果我添加1然后写5它将显示答案为16而不是15我不善于解释我希望附加是在文本框底部的小提琴你可以看到所有计算的答案显示不正确这里是附加小提琴请看看

$(document).on('input', '.line48_a, .line48_b', function() {
    var line48_a = parseInt($('.line48_a').val());
    var line48_b = parseInt($('.line48_b').val()) ? parseInt($('.line48_b').val()) : 0;
	var answer = (line48_a + line48_b);
	
	var old_answer1 = parseInt($('.line52_a').val()) ? parseInt($('.line52_a').val()) : 0;
	var new_answer1 = old_answer1 + line48_a;
	$('.line52_a').val((new_answer1 ? new_answer1 : 0 ));
	
	var old_answer2 = parseInt($('.line52_b').val()) ? parseInt($('.line52_b').val()) : 0;
	var new_answer2 = old_answer2 + line48_b;
	$('.line52_b').val((new_answer2 ? new_answer2 : 0 ));
	
    $('.line48_c').val((answer ? answer : 0 ));
});

$(document).on('input', '.line49_a, .line49_b', function() {
    var line49_a = parseInt($('.line49_a').val());
    var line49_b = parseInt($('.line49_b').val()) ? parseInt($('.line49_b').val()) : 0;
	var answer = (line49_a + line49_b);
	
	var old_answer1 = parseInt($('.line52_a').val()) ? parseInt($('.line52_a').val()) : 0;
	var new_answer1 = old_answer1 + line49_a;
	$('.line52_a').val((new_answer1 ? new_answer1 : 0 ));
	
	var old_answer2 = parseInt($('.line52_b').val()) ? parseInt($('.line52_b').val()) : 0;
	var new_answer2 = old_answer2 + line49_b;
	$('.line52_b').val((new_answer2 ? new_answer2 : 0 ));
	
    $('.line49_c').val((answer ? answer : 0 ));
});

$(document).on('input', '.line50_a, .line50_b', function() {
    var line50_a = parseInt($('.line50_a').val());
    var line50_b = parseInt($('.line50_b').val()) ? parseInt($('.line50_b').val()) : 0;
	var answer = (line50_a + line50_b);
	
	var old_answer1 = parseInt($('.line52_a').val()) ? parseInt($('.line52_a').val()) : 0;
	var new_answer1 = old_answer1 + line50_a;
	$('.line52_a').val((new_answer1 ? new_answer1 : 0 ));
	
	var old_answer2 = parseInt($('.line52_b').val()) ? parseInt($('.line52_b').val()) : 0;
	var new_answer2 = old_answer2 + line50_b;
	$('.line52_b').val((new_answer2 ? new_answer2 : 0 ));
	
    $('.line50_c').val((answer ? answer : 0 ));
});

$(document).on('input', '.line51_a, .line51_b', function() {
    var line51_a = parseInt($('.line51_a').val());
    var line51_b = parseInt($('.line51_b').val()) ? parseInt($('.line51_b').val()) : 0;
	var answer = (line51_b + line51_a);
	
	var old_answer1 = parseInt($('.line52_a').val()) ? parseInt($('.line52_a').val()) : 0;
	var new_answer1 = old_answer1 + line51_a;
	$('.line52_a').val((new_answer1 ? new_answer1 : 0 ));
	
	var old_answer2 = parseInt($('.line52_b').val()) ? parseInt($('.line52_b').val()) : 0;
	var new_answer2 = old_answer2 + line51_b;
	$('.line52_b').val((new_answer2 ? new_answer2 : 0 ));
	
    $('.line51_c').val((answer ? answer : 0 ));
});

.table_body > div {
    display: inline-block;
    vertical-align: top;
    width: 15%;
    margin-left: -3px;
    text-align: right;
}

 .table_body > div:nth-child(2) {
    width: 10%;
}

.col-7 {
    padding: 0;
}

.table_head > div:first-child,
.table_body > div:first-child {
    text-align: left;
}

.col-7 {
    width: 60% !important;
}

.table_body {
    height: 40px;
    line-height: 40px;
}

.table_body > div > span {
    display: inline-block;
    vertical-align: top;
}

.table_body > div > span > input {
    width: auto !important;
    display: inline-block;
    margin-left: 1px;
}

.table_body > div > select.form-control {
    padding: 5px;
    width: 50%;
    float: right;
}

.table_body > div > input {
    width: 80%;
    height: 30px;
    line-height: 30px;
    padding: 0 5px;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<ul>
 <li class="table_body">
				<div class="col-7">Window Cleaning</div>
				<div><input type="text" class="line48_a" name="line48_a" /></div>
				<div><input type="text" class="line48_b" name="line48_b" /></div>
				<div><input type="text" class="line48_c" name="line48_c" value="0.00" readonly /></div>
			  </li>
			  
			   <li class="table_body">
				<div class="col-7">Common Area Cleaning</div>
				<div><input type="text" class="line49_a" name="line49_a" /></div>
				<div><input type="text" class="line49_b" name="line49_b" /></div>
				<div><input type="text" class="line49_c" name="line49_c" value="0.00" readonly /></div>
			  </li>
			  <li class="table_body">
				<div class="col-7">Over-Standard Cleaning</div>
				<div><input type="text" class="line50_a" name="line50_a" /></div>
				<div><input type="text" class="line50_b" name="line50_b" /></div>
				<div><input type="text" class="line50_c" name="line50_c" value="0.00" readonly /></div>
			  </li>
			  <li class="table_body">
				<div class="col-7">Other Non-Variable/Fixed Cleaning Costs</div>
				<div><input type="text" class="line51_a" name="line51_a" /></div>
				<div><input type="text" class="line51_b" name="line51_b" /></div>
				<div><input type="text" class="line51_c" name="line51_c" value="0.00" readonly /></div>
			  </li>
  			  <li class="table_body">
				<div class="col-7">Total Non-Variable Expenses</div>
				<div><input type="text" class="line52_a" name="line52_a" value="0.00" readonly /></div>
				<div><input type="text" class="line52_b" name="line52_b" value="0.00" readonly /></div>
				<div><input type="text" class="line52_c" name="line52_c" value="0.00" readonly /></div>
			  </li>

			</ul>

Answer 1

有点大修（对不起），但也许你可以使用它，而且更清洁。

编辑：我选择的解决方案......数据属性：

https://jsfiddle.net/q3L6q3L6/

HTML

 <ul>
 <li class="table_body">
                <div class="col-7">Window Cleaning</div>
                <div><input data-section="window" type="text" data-category="1"  name="window1" /></div>
                <div><input data-section="window" type="text" data-category="2"  name="window2" /></div>
                <div><input data-section="window"type="text"  name="window_total" value="0.00" readonly /></div>
              </li>

 <li class="table_body">
                <div class="col-7">Common area cleaning</div>
                <div><input data-section="common" type="text" data-category="1"  name="common1" /></div>
                <div><input data-section="common" type="text" data-category="2"  name="common2" /></div>
                <div><input data-section="common" type="text"  name="common_total" value="0.00" readonly /></div>
              </li>
              <li class="table_body">
                <div class="col-7">Over-Standard Cleaning</div>
                <div><input data-section="over" type="text" data-category="1"  name="over1" /></div>
                <div><input data-section="over" type="text" data-category="2"  name="over2" /></div>
                <div><input data-section="over" type="text" name="over_total" value="0.00" readonly /></div>
              </li>
              <li class="table_body">
                <div class="col-7">Other Non-Variable/Fixed Cleaning Costs</div>
                <div><input data-section="other" type="text" data-category="1" name="other1" /></div>
                <div><input data-section="other" type="text"  data-category="2" name="other2" /></div>
                <div><input data-section="other" type="text" name="other_total" value="0.00" readonly /></div>
              </li>
              <li class="table_body">
                <div class="col-7">Total Non-Variable Expenses</div>
                <div><input type="text" name="total1" value="0.00" readonly /></div>
                <div><input type="text" name="total2" value="0.00" readonly /></div>
                <div><input type="text" name="total_total" value="0.00" readonly /></div>
              </li>

            </ul>

JQuery的

$('[data-section]').on('input', function(){
    var self = $(this),
        section = self.data("section"),
      category = self.data("category"),
      a = parseInt($('[name=' + section + '1]').val()) || 0,
      b = parseInt($('[name=' + section + '2]').val()) || 0,
      c = 0;

 $('[name=' + section + '_total]').val(a + b);
 $('[data-category=' + category + ']').each(function(){
     var me = $(this);
     c += parseInt(me.val()) || 0;
 });
 $('[name=total' + category + ']').val(c);
});

老年人解决方案：

https://jsfiddle.net/099raLxL/4/

$('input').on('input', function(){
    var line = $(this).attr('name').split("_"),
        letter = line.pop(),
        a = parseInt($('.line48_' + letter).val()) || 0,
        b = parseInt($('.line49_' + letter).val()) || 0,
        c = parseInt($('.line50_' + letter).val()) || 0,
        d = parseInt($('.line51_' + letter).val()) || 0,
        e = parseInt($('.' + line + '_a').val()) || 0,
        f = parseInt($('.' + line + '_b').val()) || 0;

    $('.line52_' + letter).val(a + b + c + d);
    $('.' + line + '_c').val(e + f);
});

jQuery将所有值与所有具有不同类的值相加

1 个答案: