在相應的輸入字段中添加並設置總值

Question

我試圖將子行中的值添加到一列中，該列應設置該列的父行中的總數。每個子女td應該在相應的父母td中加上值。

現在正在發生的事情是，我可以在第一列中添加子行的值，並將總數設置在父行的相應輸入字段中;如果我然後將第二列中的子行的值相加，它不會在第二列的父級中設置該值。它與第一列的父項相加。

下面的代碼 [jsFiddle]：

HTML：

<table class="table"> 
<tr class="parent-A"> 
     <td><h5>A</h5></td> 
     <td>&nbsp;</td> 
     <td><input type="text" /></td> 
     <td>&nbsp;</td> 
     <td><input type="text" /></td> 
     <td>&nbsp;</td> 
     <td><input type="text" /></td> 
    </tr> 
    <tr> 
     <td><h6>A1</h6></td> 
     <td>&nbsp;</td> 
     <td><input type="text" data-parent="A" /></td> 
     <td>&nbsp;</td> 
     <td><input type="text" data-parent="A" /></td> 
     <td>&nbsp;</td> 
     <td><input type="text" data-parent="A" /></td> 
    </tr> 
    <tr> 
     <td><h6>A2</h6></td> 
     <td>&nbsp;</td> 
     <td><input type="text" data-parent="A" /></td> 
     <td>&nbsp;</td> 
     <td><input type="text" data-parent="A" /></td> 
     <td>&nbsp;</td> 
     <td><input type="text" data-parent="A" /></td> 
    </tr> 
    <tr> 
     <td><h6>A3</h6></td> 
     <td>&nbsp;</td> 
     <td><input type="text" data-parent="A" /></td> 
     <td>&nbsp;</td> 
     <td><input type="text" data-parent="A" /></td> 
     <td>&nbsp;</td> 
     <td><input type="text" data-parent="A" /></td> 
    </tr> 
    <tr class="parent-B"> 
     <td><h5>B</h5></td> 
     <td>&nbsp;</td> 
     <td><input type="text" /></td> 
     <td>&nbsp;</td> 
     <td><input type="text" /></td> 
     <td>&nbsp;</td> 
     <td><input type="text" /></td> 
    </tr> 
    <tr> 
     <td><h6>B1</h6></td> 
     <td>&nbsp;</td> 
     <td><input type="text" data-parent="B" /></td> 
     <td>&nbsp;</td> 
     <td><input type="text" data-parent="B" /></td> 
     <td>&nbsp;</td> 
     <td><input type="text" data-parent="B" /></td> 
    </tr> 
    <tr> 
     <td><h6>B2</h6></td> 
     <td>&nbsp;</td> 
     <td><input type="text" data-parent="B" /></td> 
     <td>&nbsp;</td> 
     <td><input type="text" data-parent="B" /></td> 
     <td>&nbsp;</td> 
     <td><input type="text" data-parent="B" /></td> 
    </tr> 
    <tr> 
     <td><h6>B3</h6></td> 
     <td>&nbsp;</td> 
     <td><input type="text" data-parent="B" /></td> 
     <td>&nbsp;</td> 
     <td><input type="text" data-parent="B" /></td> 
     <td>&nbsp;</td> 
     <td><input type="text" data-parent="B" /></td> 
    </tr> 
</table> 

的jQuery：

$('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); 
      }); 

     }); 

    }); 



}); 

Answer 1

嘗試

fiddle Demo

$(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]; 
     }); 
    }); 
});