calcolare somma di ogni td avere classe simile

Question

Il mio tavolo html td assomiglia a questo

<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> 

Sto cercando di contare il numero di td's disponibile prima classe total e sommare i valori e metterlo in rispettiva classe totale td.

quindi voglio ottenere

<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> 

Questo è quello che ho provato.

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

Ma non funziona. come ottenere questo?

Answer 1

Prova:

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

Dopo aver visto l'aggiornamento, potrei andare con prevUntil soluzione:

$('.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

o cercare .prevAll function(). Trova la documentazione nel seguente link 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

Poiché jQuery disponibile .prevUntil() API per attraversare pari livello precedente fino incontrato l'elemento di arresto con, utilizzarlo in questo modo:

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

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

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

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

}); 

DEMO

Answer 6

È possibile fare uso di prevUntil per navigare indietro alla precedente siblings del td fino ad un selettore, DOM, ecc .. Si può leggere di più su prevUntilhere.

Si prega di trovare la demo di lavoro 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

È possibile provare il seguente:

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