计算具有相似类别的每个td的总和

时间:2016-03-01 05:20:32

标签: jquery html sum html-table

我的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);                       
});

但它不起作用。如何实现这个目标?

7 个答案:

答案 0 :(得分:12)

尝试:

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/

答案 1 :(得分:4)

看到您的更新后,我可以使用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/

答案 2 :(得分:4)

&#13;
&#13;
$(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);
  })

});
&#13;
<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>
&#13;
&#13;
&#13;

答案 3 :(得分:3)

由于jQuery提供了.prevUntil() API来遍历以前的兄弟,直到遇到要停止的元素,因此请使用它:

def is_sequence(obj):
    try:
        len(obj)
        obj[0:0]
        return True
    except TypeError:
        return False

class Vector:
    l=[]

    def __init__(self,object):
        if(isinstance(object,long) |isinstance(object,int)):
            x=int(object)
            if(x<0):

            else:
                for i in range(0,x):
                    l.append(0.0)

        elif(is_sequence(object)):
            l.append(object)

        else:

DEMO

答案 4 :(得分:2)

尝试.prevAll()函数。查找以下链接中的文档:

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

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

答案 5 :(得分:2)

您可以使用prevUntil导航回siblings之前的td,直到选择器,DOM等。可以阅读有关prevUntil的更多信息here

请找到工作演示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);
    })
});

答案 6 :(得分:0)

您可以尝试以下操作:

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