jQuery - 計算一個td內的兩個數字的總和並顯示在新的td中？

Question

你好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

1. 使用.each()迭代所有tr
2. 使用.text()來獲取文本
3. 使用.append()在tr最后寫入新的td
4. 根據需要使用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

1. 找到最后一個children('td:last') 。
2. 拆分字符串split(-)
3. 並使用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>");
}
});