时间戳

首页 > 解决方案 > 每个表格行的jQuery总和表格单元格

jquery - 每个表格行的jQuery总和表格单元格

问题描述

我想形成一个存在值的表的总和，并将它们显示在单独的 td 中。

我正在使用的表格有一些不是数字的内容，并且表格行数是可变的。

names        | val 1 | val 2  | val n | val n+1 | sum
name 1       | 0,00  |  12,00 | -3,00 | 1,00    |
another name | 1,00  |   1,00 |  1,00 | 0,00    |
name x       | 1,00  | no int |  2,00 | 0,00    |

每个 td 都有一个要求和的值，看起来像<td> some text <span class="tosum"> 1,00 </span></td>。总和列看起来像<td class="finalsum"></td>并且从一开始就是空的。

因为我能够专注于.tosum每行的元素，所以我在考虑这样的事情：

$(document).ready(){
    sumTable();
});

function sumTable(){
    var sum = 0;
    
    $("tr").each(function(){
        sum += parseFloat($(this).find(".tosum").text().replace(',', '.'));
        $(this).find("td.finalsum").text(sum);
    
        //console.log($(this).find(".tosum").text() + " // ");

    });
}

尝试添加这些值会导致总和行中出现 NaN。

标签： jquery

解决方案

首先请注意，您的 document.ready 处理程序的语法不正确。它应该是$(document).ready(function() { /* your code here */ });

关于对行求和的问题，您需要两个循环。一个通过所有tr元素，另一个通过其中的目标td。,然后，您可以在将字符替换为.并添加到运行总数后简单地将文本值解析为浮点数。此外，您应该.totalsum在循环后通过td. 尝试这个：

jQuery($ => {
  sumTable();
});

function sumTable() {
  $("tr").each((_, tr) => {  
    let sum = 0, $tr = $(tr);
    $tr.children('td:not(:first, .finalsum)').each((_, td) => {
      sum += parseFloat($(td).find('.tosum').text().replace(',', '.')) || 0;    
    });
    $tr.children('.finalsum').text(sum);
  });
}
.finalsum { 
  text-align: right; 
  font-weight: bold;
  color: #C00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>names</td>
    <td>val 1</td>
    <td>val 2</td>
    <td>val n</td>
    <td>val n+1</td>
    <td>sum</td>
  </tr>
  <tr>
    <td>name 1</td>
    <td>some text <span class="tosum">0,00</span></td>
    <td>some text <span class="tosum">12,00</span></td>
    <td>some text <span class="tosum">-3,00</span></td>
    <td>some text <span class="tosum">1,00</span></td>
    <td class="finalsum"></td>
  </tr>
  <tr>
    <td>another name</td>
    <td>some text <span class="tosum">1,00</span></td>
    <td>some text <span class="tosum">1,00</span></td>
    <td>some text <span class="tosum">1,00</span></td>
    <td>some text <span class="tosum">0,00</span></td>
    <td class="finalsum"></td>
  </tr>
  <tr>
    <td>name x</td>
    <td>some text <span class="tosum">1,00</span></td>
    <td>some text <span class="tosum">no int</span></td>
    <td>some text <span class="tosum">2,00</span></td>
    <td>some text <span class="tosum">0,00</span></td>
    <td class="finalsum"></td>
  </tr>
</table>

推荐阅读