Jquery 在相应的输入字段中添加并设置总值
我试图将子行中的值添加到一列中,这应该设置该列父行中的合计。每个子Jquery 在相应的输入字段中添加并设置总值,jquery,html,jquery-calculation,Jquery,Html,Jquery Calculation,我试图将子行中的值添加到一列中,这应该设置该列父行中的合计。每个子td应在相应的父td中添加值 现在发生的事情是,我可以将第一列中的子行的值相加,并在父行的相应输入字段中设置总数;如果我在第二列中加上子行的值,它不会在第二列的父行中设置值。它与第一列的父列相加 代码如下: HTML: <table class="table"> <tr class="parent-A"> <td><h5>A</h5></td>
td
应在相应的父td
中添加值
现在发生的事情是,我可以将第一列中的子行的值相加,并在父行的相应输入字段中设置总数;如果我在第二列中加上子行的值,它不会在第二列的父行中设置值。它与第一列的父列相加
代码如下:
HTML:
<table class="table">
<tr class="parent-A">
<td><h5>A</h5></td>
<td> </td>
<td><input type="text" /></td>
<td> </td>
<td><input type="text" /></td>
<td> </td>
<td><input type="text" /></td>
</tr>
<tr>
<td><h6>A1</h6></td>
<td> </td>
<td><input type="text" data-parent="A" /></td>
<td> </td>
<td><input type="text" data-parent="A" /></td>
<td> </td>
<td><input type="text" data-parent="A" /></td>
</tr>
<tr>
<td><h6>A2</h6></td>
<td> </td>
<td><input type="text" data-parent="A" /></td>
<td> </td>
<td><input type="text" data-parent="A" /></td>
<td> </td>
<td><input type="text" data-parent="A" /></td>
</tr>
<tr>
<td><h6>A3</h6></td>
<td> </td>
<td><input type="text" data-parent="A" /></td>
<td> </td>
<td><input type="text" data-parent="A" /></td>
<td> </td>
<td><input type="text" data-parent="A" /></td>
</tr>
<tr class="parent-B">
<td><h5>B</h5></td>
<td> </td>
<td><input type="text" /></td>
<td> </td>
<td><input type="text" /></td>
<td> </td>
<td><input type="text" /></td>
</tr>
<tr>
<td><h6>B1</h6></td>
<td> </td>
<td><input type="text" data-parent="B" /></td>
<td> </td>
<td><input type="text" data-parent="B" /></td>
<td> </td>
<td><input type="text" data-parent="B" /></td>
</tr>
<tr>
<td><h6>B2</h6></td>
<td> </td>
<td><input type="text" data-parent="B" /></td>
<td> </td>
<td><input type="text" data-parent="B" /></td>
<td> </td>
<td><input type="text" data-parent="B" /></td>
</tr>
<tr>
<td><h6>B3</h6></td>
<td> </td>
<td><input type="text" data-parent="B" /></td>
<td> </td>
<td><input type="text" data-parent="B" /></td>
<td> </td>
<td><input type="text" data-parent="B" /></td>
</tr>
</table>
$('input[type=text]').on('blur', function() {
var $dataRows=$(".table");
var parent_name = $(this).attr('data-parent');
var find_parent_row = $('tr.parent-' + parent_name);
var $this_row = $(this).closest('tr');
$this_row.each(function() {
$(this).find('input').each(function(i){
totals[i]+=parseInt( $(this).val());
console.log(totals[i]);
var eVal = (isNaN(totals[i])) ? 0 : totals[i];
$(find_parent_row).find('input').eq(i).val(eVal);
});
});
});
});
试一试
试一试
成功了!非常感谢你@输入欢迎乐于帮助:)再次感谢。我只是有个小问题。我如何将所有3列的父
A
+B
相加,并在相应输入字段的总计行中设置它们的值?@input发布一个新问题。我会帮助你的。这样做了!非常感谢你@输入欢迎乐于帮助:)再次感谢。我只是有个小问题。如何将所有3列的父A
+B
相加,并在相应输入字段的合计行中设置它们的值?@input发布一个新问题。我将帮助您。
$(function () {
$('[class*="parent-"] input').attr('readonly', true);
$('input[type=text]').on('blur', function () {
var totals = [0, 0, 0];
var $dataRows = $(".table");
var parent_name = $(this).data('parent');
var find_parent_row = $('tr.parent-' + parent_name);
find_parent_row.nextUntil('[class*="parent-"]').find('input').each(function () {
totals[$(this).parent('td').index() / 2 - 1] += +this.value;
});
find_parent_row.find('input').each(function(i) {
this.value = totals[i];
});
});
});