如何使用 td id Jquery 对所有表行 td (TotalPrice) 求和

Question

我正在向表中添加值，例如：Item、Quantity、Price、TotalPrice

现在有多行：我如何总结所有的 TotalPrice 以使用 Jquery 获得 GrandTotal。

代码：

$("#Product").append(" <tr><td id='clientname'>" +ClientName+ "</td> <td id='item'>"+ItemName+"</td> <td id='quantity'>"+Quantity+"</td> <td id='price'>"+Price+"</td> <td id='totalprice'>"+TotalPrice+"</td> <td> <a  onClick='deleteRow(this);'>Delete</a> </td> </tr>");

当我插入新行数据时，它可能会在文本框/标签中显示总计，例如：

 function TotalPriceCalc()
 {
 var lblTotalPrice = document.getElementById('lblTotalPrice');
 lblTotalPrice.value = sum; 
 }

Answer 1

这是一个示例，它将对您提供的任何列索引求和。

 $(function() { $("#subtotal").html(sumColumn(4)); $("#total").html(sumColumn(5)); }); function sumColumn(index) { var total = 0; $("td:nth-child(" + index + ")").each(function() { total += parseInt($(this).text(), 10) || 0; }); return total; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table style="border-spacing: 10px;"> <tr> <td>ClientName</td> <td>ItemName</td> <td>Quantity</td> <td>12</td> <td>34</td> </tr> <tr> <td>ClientName</td> <td>ItemName</td> <td>Quantity</td> <td>56</td> <td>78</td> </tr> <tr> <td>ClientName</td> <td>ItemName</td> <td>Quantity</td> <td>90</td> <td>12</td> </tr> <tr> <td colspan="3">Totals</td> <td id="subtotal"></td> <td id="total"></td> </tr> </table>

Answer 2

在您使用class=而不是id=原因ID 必须是唯一的。 你需要遍历每一行并找到 totalPrice

$(document).ready(function(){
    var TotalValue = 0;
    $("#Product tr").each(function(){
          TotalValue += parseFloat($(this).find('.totalprice').text());
    });
    alert(TotalValue);
});

当您标记 Jquery .. 这是一个 Jquery 解决方案，因此请务必包含 Jquery

Answer 3

您应该使用类而不是 ID 来命名重复的元素。 所以应该是：

...<td class="totalprice">'+TotalPrice+'</td>...

然后你可以做

function TotalPriceCalc() {
    var total = 0;
    $(".totalprice").each(function() {
        total += parseFloat($(this).text());
    });
    $("#lblTotalPrice").val(total);
}

Answer 4

看，这是我们的桌子

<table class="table table-bordered">
    <thead>
        <tr>
            <th>1</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td id="loop">50</td>
        </tr>
        <tr>
            <td>1</td>
            <td id="loop">60</td>
        </tr>
        <tr>
            <td>1</td>
            <td id="loop">70</td>
        </tr>
    </tbody>
    <tbody>
      <tr>
         <td class="text-right">Total</td>
        <td></td>
     </tr>
  </tbody>

这是具有价格总和的循环

          $(function() {
        
            var TotalValue = 0;

            $("tr #loop").each(function(index,value){
                currentRow = parseFloat($(this).text());
                TotalValue += currentRow
            });
            
            console.log(TotalValue);

        });