Question

Hello Stackoverflowers，

我有这段代码：

    <table class="table">
        <tbody>
            <tr>
                <td><a href="#">New thing</a></td>
                <td>2017/06/04 08:00</td>
                <td><a href="#">One Thing</a><span>Another thing</span></td>
                <td class="random">R</td>
                <td><a href="#">12-11      </a></td>
            </tr>
            <tr>
                <td><a href="#">New thing</a></td>
                <td>2017/06/04 08:00</td>
                <td><a href="#">One Thing</a><span>Another thing</span></td>
                <td class="random">R</td>
                <td><a href="#">22-23      </a></td>
            </tr>
        </tbody>
    </table>

在结果中我想使用jQuery获取最后一个表TD内的数字总和并将其显示到新的TD中。如下面的代码所示：

<table class="table">
    <tbody>
        <tr>
            <td><a href="#">New thing</a></td>
            <td>2017/06/04 08:00</td>
            <td><a href="#">One Thing</a><span>Another thing</span></td>
            <td class="random">R</td>
            <td><a href="#">12-11      </a></td>
            <td>[ 23 ]</td>
        </tr>
        <tr>
            <td><a href="#">New thing</a></td>
            <td>2017/06/04 08:00</td>
            <td><a href="#">One Thing</a><span>Another thing</span></td>
            <td class="random">R</td>
            <td><a href="#">22-23      </a></td>
            <td>[ 45 ]</td>
        </tr>
    </tbody>
</table>

提前谢谢。

Answer 1

使用.each()来迭代所有tr
使用.text()获取文字
使用.append()在td

tr

根据需要使用parseInt()或parseFloat()或Number()

//iterate all tr in table 
$('.table tr').each(function() {
  // using this context to point to each tr get the last td using .last(). 
  // use .text() to get its text
  var tdval = $(this).find('td').last().text();
  
  // use split and get the first value using index 0
  var first = parseInt(tdval.split('-')[0])
  
  // use split and get the second value using index 1
  var second = parseInt(tdval.split('-')[1])
  
  // use append to append the td where you will show the sum of two number. 
  // append will put the td in last 
  $(this).append("<td>" + (first + second) + "</td>")
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tbody>
    <tr>
      <td><a href="#">New thing</a></td>
      <td>2017/06/04 08:00</td>
      <td><a href="#">One Thing</a><span>Another thing</span></td>
      <td class="random">R</td>
      <td><a href="#">12-11      </a></td>
    </tr>
    <tr>
      <td><a href="#">New thing</a></td>
      <td>2017/06/04 08:00</td>
      <td><a href="#">One Thing</a><span>Another thing</span></td>
      <td class="random">R</td>
      <td><a href="#">22-23      </a></td>
    </tr>
  </tbody>
</table>

Answer 2

找到最后一个children('td:last')。
使用split(-)
使用parseFloat()将字符串转换为数字

$('table tr').each(function(){
var a =$(this).children('td:last').text().trim().split('-')
$(this).append('<td>'+(parseFloat(a[0])+parseFloat(a[1]))+'</td>')
})

table,tr,td{
border:1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table class="table">
        <tbody>
            <tr>
                <td><a href="#">New thing</a></td>
                <td>2017/06/04 08:00</td>
                <td><a href="#">One Thing</a><span>Another thing</span></td>
                <td class="random">R</td>
                <td><a href="#">12-11      </a></td>
            </tr>
            <tr>
                <td><a href="#">New thing</a></td>
                <td>2017/06/04 08:00</td>
                <td><a href="#">One Thing</a><span>Another thing</span></td>
                <td class="random">R</td>
                <td><a href="#">22-23</a></td>
            </tr>
        </tbody>
    </table>

Answer 3

可以通过3个步骤使用Vanilla JavaScript在这个简单的方法中完成：

// 1.Get last td element from each tr element
var trsCollection = document.getElementsByTagName("tr");
var lastTd = [];
var tdSum = [];
var trs = Array.from(trsCollection)
trs.forEach(function(tr){
   var tds = tr.getElementsByTagName("td");
   lastTd.push(tds[tds.length-1]);
});

// 2.Calculate the sum of each last td element
lastTd.forEach(function(ltd){
   var tdNumbers = ltd.textContent.trim().split("-");
   var sum = 0;
       tdNumbers.forEach(function(num){
          sum = sum + Number(num);
       });
   tdSum.push(sum);    
});

// 3.Add new td element to each tr parent 
for (var i = 0; i < tdSum.length; i++) {
    var newTd = document.createElement("td");
    newTd.append(tdSum[i]);
    trs[i].append(newTd);
};

我希望这有助于解决您的问题。

Answer 4

$(document).ready(function(){
    var a=$('tr td:last-child');
    for(var i=0;i<a.length;i++){
var newElement = a[i].innerText.split('-').reduce(function(prev,curr){
return parseInt(prev) + parseInt(curr);
});

a[i].after("<td>"+newElement+"</td>");
}
});

jQuery - 计算一个td内的两个数字的总和并显示在新的td中？

4 个答案: