計算總和

Question

我的HTML表格TD看起來像這樣

<td class="20">1</td> 
<td class="20">2</td> 
<td class="20">3</td> 
<td class="20">4</td> 
<td class="20">5</td> 
<td class="20">3</td> 
<td class="total"></td> 
<td class="30">2</td> 
<td class="30">5</td> 
<td class="30">6</td> 
<td class="total"></td> 

我想算td's可用數量total課前和值相加，並把它放在各自的總類TD。

所以我想

<td class="20">1</td> 
<td class="20">2</td> 
<td class="20">3</td> 
<td class="20">4</td> 
<td class="20">5</td> 
<td class="20">3</td> 
<td class="total">Total : 18</td> 
<td class="30">2</td> 
<td class="30">5</td> 
<td class="30">6</td> 
<td class="total">Total : 13</td> 

這是我都試過了。

var sum = 0; 
$('.total').each(function(){ 
var tdTxt = $(this).prev('td').text(); 
    sum += parseFloat(tdTxt);      
}); 

但它不工作。如何實現這一目標？

Answer 1

嘗試：

var temp = 0; 
$('td').each(function(){ 

var tdTxt = $(this).text(); 
    if($(this).hasClass('total')) { 
     $(this).text(temp); 
     temp = 0; 
    } else { 
     temp+= parseFloat(tdTxt);  
    } 

}); 

https://jsfiddle.net/8f4b1tok/

Answer 2

看到您的更新後，我可以prevUntil解決方案去：

$('.total').each(function(){//To calculate with 
    var sum = 0;//initialize sum equal to 0 
    var fields = $(this).prevUntil('.total');//find the required tds until the .total 
    fields.each(function(){//loop each total fields 
    sum += parseFloat($(this).text());//add each tds value to sum 
    }); 
$(this).html('<b>The total is: ' + sum + '</b>');//push the value of sum to .total field 
}); 

https://jsfiddle.net/dox114ff/

Answer 3

可嘗試.prevAll（）函數。在以下鏈接中查找文檔S：

http://api.jquery.com/prevall/

http://www.w3schools.com/jquery/traversing_prevall.asp

Answer 4

$(document).ready(function() { 
 

 
    $('.total').each(function() { 
 
    var prevClass = $(this).prev().attr('class'); 
 
    var sum = 0; 
 
    $('.' + prevClass).each(function() { 
 
     sum += Number($(this).text()); 
 
    }) 
 

 
    $(this).text('Total :'+sum); 
 
    }) 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td class="20">1</td> 
 
    <td class="20">2</td> 
 
    <td class="20">3</td> 
 
    <td class="20">4</td> 
 
    <td class="20">5</td> 
 
    <td class="20">3</td> 
 
    <td class="total">8</td> 
 
    <td class="30">2</td> 
 
    <td class="30">5</td> 
 
    <td class="30">6</td> 
 
    <td class="total"></td> 
 
    </tr> 
 
</table>

Answer 5

因爲jQuery的提供.prevUntil() API來遍歷以前的兄弟，直到遇到的元素停止與使用它像這樣：

$('.total').each(function() { 

    var sum = 0, 
     elem = $(this).prevUntil('.total'); 

    elem.each(function() { 
    sum += parseInt($(this).text()) 
    }); 

    $(this).text('Total :' + sum); 

}); 

DEMO

Answer 6

您可以使用prevUntil導航回到td以前siblings直到選擇器，DOM等。人們可以閱讀更多有關prevUntilhere。

請參閱工作演示here。

HTML：

<table> 
    <tbody> 
     <tr> 
      <td class="20">1</td> 
      <td class="20">2</td> 
      <td class="20">3</td> 
      <td class="20">4</td> 
      <td class="20">5</td> 
      <td class="20">3</td> 
      <td class="total"></td> 
      <td class="30">2</td> 
      <td class="30">5</td> 
      <td class="30">6</td> 
      <td class="total"></td> 
     </tr> 
    </tbody> 
</table> 

JS：

$(function() { 
    $('.total').each(function() { 
     var numbers = $(this).prevUntil('.total').text().split(''); 
     var total = 0; 
     $.each(numbers, function (k, v) { 
      total += parseInt(v); 
     }); 
     $(this).text('[Total = ' + total + ']'); 
     console.log('total=', total); 
    }) 
}); 

Answer 7

你可以嘗試以下方法：

$('.total').each(function() { 
    var sum = $(this).prevUntil('.total').map(function() { 
     return parseInt($(this).text()); 
    }).get().reduce((a, b) => a + b, 0); 

    $(this).text('Total : ' + sum); 
});