計算所有列的總和

我想計算所有列中父行的總和。下面是我在做什麼，現在 [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> 
      <tr class="total"> 
       <td colspan="2"><h4>Total A + B</h4></td> 
       <td colspan="2"><input type="text"/></td> 
       <td colspan="2"><input type="text"/></td> 
       <td><input type="text"/></td> 
      </tr> 
      <tr class="parent-C"> 
       <td><h5>C</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>C1</h6></td> 
       <td>&nbsp;</td> 
       <td><input type="text" data-parent="C" /></td> 
       <td>&nbsp;</td> 
       <td><input type="text" data-parent="C" /></td> 
       <td>&nbsp;</td> 
       <td><input type="text" data-parent="C" /></td> 
      </tr> 
      <tr> 
       <td><h6>C2</h6></td> 
       <td>&nbsp;</td> 
       <td><input type="text" data-parent="C" /></td> 
       <td>&nbsp;</td> 
       <td><input type="text" data-parent="C" /></td> 
       <td>&nbsp;</td> 
       <td><input type="text" data-parent="C" /></td> 
      </tr> 
      <tr> 
       <td><h6>C3</h6></td> 
       <td>&nbsp;</td> 
       <td><input type="text" data-parent="C" /></td> 
       <td>&nbsp;</td> 
       <td><input type="text" data-parent="C" /></td> 
       <td>&nbsp;</td> 
       <td><input type="text" data-parent="C" /></td> 
      </tr> 
      <tr class="parent-D"> 
       <td><h5>D</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>D1</h6></td> 
       <td>&nbsp;</td> 
       <td><input type="text" data-parent="D" /></td> 
       <td>&nbsp;</td> 
       <td><input type="text" data-parent="D" /></td> 
       <td>&nbsp;</td> 
       <td><input type="text" data-parent="D" /></td> 
      </tr> 
      <tr> 
       <td><h6>D2</h6></td> 
       <td>&nbsp;</td> 
       <td><input type="text" data-parent="D" /></td> 
       <td>&nbsp;</td> 
       <td><input type="text" data-parent="D" /></td> 
       <td>&nbsp;</td> 
       <td><input type="text" data-parent="D" /></td> 
      </tr> 
      <tr> 
       <td><h6>D3</h6></td> 
       <td>&nbsp;</td> 
       <td><input type="text" data-parent="D" /></td> 
       <td>&nbsp;</td> 
       <td><input type="text" data-parent="D" /></td> 
       <td>&nbsp;</td> 
       <td><input type="text" data-parent="D" /></td> 
      </tr> 
      <tr class="total"> 
       <td colspan="2"><h4>Total C + D</h4></td> 
       <td colspan="2"><input type="text"/></td> 
       <td colspan="2"><input type="text"/></td> 
       <td><input type="text"/></td> 
      </tr> 
     </table>

的jQuery：

$(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); 
     var $total_row = $('.total'); 
     var total = 0; 
     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]; 

      var tVal = parseFloat (totals[i]); 
      if (tVal) { 
       total += tVal; 
       $total_row.find('input').eq(i).val(total); 
      } 
     }); 
    }); 
});

這裏做的事情是，它會顯示父行的最後計算出的值，而不是添加他們所有的喜歡它應該。

來源

2013-12-09 input

建議你使用隔離''包裝部分，或使用單獨的表 – charlietfl

fiddle Demo

HTML

<tr class="total" data-par="A,B"> <!-- for A+B --> 

<tr class="total" data-par="C,D"> <!-- for C+D -->

var total_par = $('tr.total'); 
total_par.each(function() { 
    totals = [0, 0, 0]; 
    var par = $(this).data('par').split(','); 
    $('[data-parent="' + par[0] + '"]').add('[data-parent="' + par[1] + '"]').each(function() { 
     totals[$(this).parent('td').index()/2 - 1] += +this.value; 
    }); 
    $(this).find('input').val(function (i) { 
     return totals[i]; 
    }); 
});

來源

2013-12-09 15:31:38

Ë xcellent！謝謝！ – input

如果我想添加更多父行，是否必須爲每個父行添加'.add（'[data-parent =''+ par [1] +'「]'）'？ – input

你能否也請回答這個問題：http://stackoverflow.com/questions/20490237/subtract-from-parent-rows – input

計算所有列的總和

回答

相關問題