tính toán tổng của mỗi td có lớp tương tự

Question

My bảng html td trông như thế này

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

Tôi đang cố gắng để đếm số td's sẵn trước khi đến lớp total và tổng hợp các giá trị và đặt nó trong tổng số lớp tương ứng td.

Vì vậy, tôi muốn có được

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

Đây là những gì tôi đã cố gắng.

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

Nhưng nó không hoạt động. làm thế nào để đạt được điều này?

Answer 1

Hãy thử:

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

Sau khi nhìn thấy cập nhật của bạn, tôi có thể đi với giải pháp 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

Hoặc thử .prevAll() chức năng. Tìm tài liệu trong liên kết sau 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

Kể từ jQuery cung cấp .prevUntil() API để đi qua anh chị em trước cho đến khi đáp ứng được các yếu tố để ngăn chặn với, sử dụng nó như vậy:

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

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

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

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

}); 

DEMO

Answer 6

Bạn có thể tận dụng prevUntil điều hướng trở lại trước siblings của td đến một selector, DOM, vv .. Người ta có thể đọc thêm về prevUntilhere.

Vui lòng tìm bản trình diễn làm việc 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

Bạn có thể thử như sau:

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