如何使用jquery获得具有相同值的列单元格的总和

Question

我想使用jquery将具有相同Id的产品添加到我的表中。例如，我有一个表，其中有一个产品(面包)在其他产品中添加了多次，我想获得添加到购物车列表中的面包的总数量。因此，我打算使用产品ID通过foreach循环找到它，这是我尝试的代码

function FindSumOfQuantityWIthSameID() {
var ProductId = $("#item").val();
var NewQuantity = parseFloat($("#txtQuantity").val());
var SumQuantity = 0;
var Total = 0;
$("#cartList").find("tr:gt(0)").each(function () {
Total = parseFloat($(this).find("td:eq(3)").has(ProductId).val().text());
SumQuantity += Total;
});
var FTD = SumQuantity + NewQuantity;
alert(FTD);
}

这里是我的Html表

<table class="table" id="cartList">
<thead>
<tr>
<th hidden>
Item Id
</th>
<th style="text-align:center">
Product
</th>
<th style="text-align:center">
Price
</th>
<th style="text-align: center">
Quantity
</th>
<th style="text-align: center">
Description
</th>
<th style="text-align: center">
SN/IMEI
</th>
<th style="text-align:center">
Total
</th>
<th style="text-align:center">
Remove
</th>
</tr>
</thead>

</table>

Jquery填充的表主体

var ItemList = "<tr><td hidden>" +
ProductId +
"</td><td class='border-0 align-middle' style='text-align: center'>" +
ItemName +
"</td><td class='border-0 align-middle' style='text-align: center'>" +
parseFloat(Amount).toFixed(2) +
"</td><td class='border-0 align-middle' style='text-align: center'>" +
Quantity +
"</td><td class='border-0 align-middle' style='text-align: center'>" +
Description +
"</td><td class='border-0 align-middle' style='text-align: center'>" +
SN_IMEI +
"</td><td class='border-0 align-middle' style='text-align: center'>" +
parseFloat(Total).toFixed(2) +
"</td><td class='border-0 align-middle' style='text-align:center'><a name='remove' class='text-danger' onclick='Removeitem(this)'><i class='icon ni ni-trash'></i></a></td></tr>";

Answer 1

在每个循环中，您可以检查第一个td的值是否等于productId，如果是，则获取该值并添加total否则仅考虑value为0。

演示代码 :

FindSumOfQuantityWIthSameID();
function FindSumOfQuantityWIthSameID() {
var ProductId = 1; //just for demo
var NewQuantity = 2; //just from demo..
var SumQuantity = 0;
var Total = 0;
$("#cartList").find("tr:gt(0)").each(function() {
//check if the first td which has id matchs product id
Total = parseInt($(this).find("td:eq(0)").text().trim()) == ProductId ? parseFloat($(this).find("td:eq(3)").text()) : 0;
SumQuantity += Total;
});
var FTD = SumQuantity + NewQuantity;
console.log(FTD);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="cartList">
<thead>
<tr>
<th hidden>
Item Id
</th>
<th style="text-align:center">
Product
</th>
<th style="text-align:center">
Price
</th>
<th style="text-align: center">
Quantity
</th>
<th style="text-align: center">
Description
</th>
<th style="text-align: center">
SN/IMEI
</th>
<th style="text-align:center">
Total
</th>
<th style="text-align:center">
Remove
</th>
</tr>
</thead>
<tbody>
<tr>
<td hidden="">1</td>
<td class="border-0 align-middle" style="text-align: center">somethings1</td>
<td class="border-0 align-middle" style="text-align: center">123.3</td>
<td class="border-0 align-middle" style="text-align: center">12</td>
<td class="border-0 align-middle" style="text-align: center">somethins ...</td>
<td class="border-0 align-middle" style="text-align: center">ab2d</td>
<td class="border-0 align-middle" style="text-align: center">100</td>
<td class="border-0 align-middle" style="text-align:center"><a name="remove" class="text-danger" onclick="Removeitem(this)">x<i class="icon ni ni-trash"></i></a></td>
</tr>
<tr>
<td hidden="">2</td>
<td class="border-0 align-middle" style="text-align: center">somethings2</td>
<td class="border-0 align-middle" style="text-align: center">123.33</td>
<td class="border-0 align-middle" style="text-align: center">1</td>
<td class="border-0 align-middle" style="text-align: center">somethins ...</td>
<td class="border-0 align-middle" style="text-align: center">abd</td>
<td class="border-0 align-middle" style="text-align: center">100</td>
<td class="border-0 align-middle" style="text-align:center"><a name="remove" class="text-danger" onclick="Removeitem(this)">x<i class="icon ni ni-trash"></i></a></td>
</tr>
<tr>
<td hidden="">1</td>
<td class="border-0 align-middle" style="text-align: center">somethings1</td>
<td class="border-0 align-middle" style="text-align: center">123.33</td>
<td class="border-0 align-middle" style="text-align: center">1</td>
<td class="border-0 align-middle" style="text-align: center">somethins ...</td>
<td class="border-0 align-middle" style="text-align: center">abd</td>
<td class="border-0 align-middle" style="text-align: center">100</td>
<td class="border-0 align-middle" style="text-align:center"><a name="remove" class="text-danger" onclick="Removeitem(this)">x<i class="icon ni ni-trash"></i></a></td>
</tr>
</tbody>
</table>