最后一个单元格中一行中所有先前列的总和

Question

我有这个代码

我希望在当前行的最后一列单元格中包含所有先前td单元格的总和。 *在页面加载上，如果可能的话，不使用类，表中的所有行。

例如

<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>3</td> <!-- this is empty cell which will on page load filled with SUM value !-->
</tr>

我该怎么做？谢谢

Answer 1

您需要获取所有td的列表/数组，然后总计内容。即。

var tds = $('.htCore td');
var total = 0;

for(var i = 0; i < tds.length; i++){
  total += parseInt(tds[i].html());
}

$('.htCore td:last-child').html(total);

这可以假设您的td中没有字符串/文字，如果您这样做，那么您需要：

var tds = $('.htCore td');
var total = 0;
var content = '';

for(var i = 0; i < tds.length; i++){
  content = parseInt(tds[i].html();

  if(!isNaN(content)){
    total += content;
  }
}

$('.htCore td:last-child').html(total);

Answer 2

一般来说，这可能是一个坏主意。那些td是显示文本的节点，将逻辑与表示分开是一个好主意。

话虽如此，你可以这样做：

var total = 0;

// Get an array of all the elements, and add their contents to total
$('td').map(function(_,v){total += +v.innerText;})

// Set the content of the last td to be total
$('td:last-child').text(total);

说明

我们正在调用所有<td>上的函数。此函数只是将<td>的文本内容强制转换为数字，并将其添加到我们的total变量中。

然后我们只将total的值写入问题中指定的最后<td>。

Answer 3

你可以利用jquery .each()的循环与一个类一起来确定应该放置总和的最后一个td（.sum），如下所示

$(document).ready(function() {
  $('table tr').each(function() {
    var sum = 0;
    $(this).find('td').each(function() {
      if (!$(this).hasClass('sum')){
        var num = parseInt($(this).text());
        sum = sum + num;
      }
    });
    $(this).find('.sum').text(sum);
  });
});

td {
  border: 1px solid black;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td class="sum"></td>
  </tr>
  <tr>
    <td>4</td>
    <td>6</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td class="sum"></td>
  </tr>
</table>

此代码适用于表中的所有行（或者如果您希望它用于选择行，只需将类添加到您希望此求和应用于的行中）

Answer 4

你可以这样做：

$('tr').find('td:last').text(function() {
    return $(this).siblings().map(function() { return parseInt($(this).text(), 10); }).get().reduce(function(x, y) { return x + y });
});

查找每个td中的最后一个tr，然后通过获取每个兄弟text的{​​{1}}来设置text（使用td ），然后使用map对结果数组求和。

Here's a fiddle