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

【问题标题】：How To Sum All Table Rows td (TotalPrice) using td id Jquery如何使用 td id Jquery 对所有表行 td (TotalPrice) 求和
【发布时间】：2021-03-15 21:48:37
【问题描述】：

我正在向表中添加值，例如：商品、数量、价格、总价

现在有多行：如何使用 Jquery 对所有的 TotalPrice 求和以获得 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; 
 }

【问题讨论】：

好吧，首先，不要将具有相同 id 的多个项目附加到您的 DOM 中
你能告诉我最好的解决方案/做法吗？
对重复的元素使用一个类，而不是一个 ID。
$("[id='clientname']").text().split(/\s+/).map(Number).filter(Number).reduce(function(a,b){return a+b;})
好的，我会@Barmar，但是如何对价格求和以获得总计？

标签： javascript jquery

【解决方案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>

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

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

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

那你就可以了

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

【讨论】：

【解决方案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);

        });

【讨论】：