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

Posted

技术标签:

【中文标题】计算具有相似类别的每个 td 的总和【英文标题】:calculate sum of each td having similar class 【发布时间】:2016-06-13 10:00:40 【问题描述】:

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

但它不起作用。如何做到这一点?

【问题讨论】:

【参考方案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/

【讨论】:

【参考方案2】:

您可以尝试以下方法:

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

【讨论】:

【参考方案3】:

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

【讨论】:

【参考方案4】:

您可以使用prevUntil 导航回到td 的前一个siblings 直到选择器、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);
    )
);

【讨论】:

【参考方案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

【讨论】:

【参考方案6】:

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

【讨论】:

【参考方案7】:

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

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

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

【讨论】:

以上是关于计算具有相似类别的每个 td 的总和的主要内容,如果未能解决你的问题,请参考以下文章

类别值被替换/更新的滚动总和

计算R中的类别特定变量

计算机视觉数据集 [关闭]

如何使用 EF Core Code-First 创建具有子类别的类别表? [复制]

SQLITE:显示每个类别的总数(总和)

数组中每个类别的总和