我陷入了在 javascript/jquery 中用于完成此操作的邏輯，如果有人有任何想法，可以使用一些幫助。
我有一張表格，其中顯示了發票上產品的每件商品成本。
目標是按類別查找所有產品（當前為shirtcountrow 和 hoodiecountrow，但稍后會有更多）并組合具有相同價值的產品。
該表目前如下所示：
<table id="productmathtable">
<tr>
<td>Shirt</td>
<td><input class="shirtcountrow" type="text" value="4" style="width:60px"> x <input class="productpricerow" type="text" value="25" style="width:60px"> = </td>
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="100" style="width:60px"></td>
</tr>
<tr>
<td>Shirt</td>
<td><input class="shirtcountrow" type="text" value="2" style="width:60px"> x <input class="productpricerow" type="text" value="25" style="width:60px"> = </td>
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="50" style="width:60px"></td>
</tr>
<tr>
<td>Shirt</td>
<td><input class="shirtcountrow" type="text" value="2" style="width:60px"> x <input class="productpricerow" type="text" value="25" style="width:60px"> = </td>
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="50" style="width:60px"></td>
</tr><tr>
<td>Hoodie</td>
<td><input class="hoodiecountrow" type="text" value="4" style="width:60px"> x <input class="productpricerow" type="text" value="35" style="width:60px"> = </td>
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="140" style="width:60px"></td>
</tr>
<tr>
<td>Hoodie</td>
<td><input class="hoodiecountrow" type="text" value="4" style="width:60px"> x <input class="productpricerow" type="text" value="35" style="width:60px"> = </td>
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="140" style="width:60px"></td></tr>
</table>
我希望它在執行 jquery/javascript 函式后看起來像這樣：
<table id="productmathtable">
<tr>
<td>Shirt</td>
<td><input class="shirtcountrow" type="text" value="8" style="width:60px"> x <input class="productpricerow" type="text" value="25" style="width:60px"> = </td>
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="200" style="width:60px"></td>
</tr>
<td>Hoodie</td>
<td><input class="hoodiecountrow" type="text" value="8" style="width:60px"> x <input class="productpricerow" type="text" value="35" style="width:60px"> = </td>
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="280" style="width:60px"></td>
</tr>
</table>
我很確定我需要更改我的 html 以便更容易識別我想要更改的每個部分，但我不確定如何
uj5u.com熱心網友回復：
假設您的 html 沒有優化，但與其重新考慮所有這些，這里有一種方法可以將它們匯總起來，然后用匯總總數重寫表格。我所做的改變的一件事是在數量欄位的類中 - 我將它們標準化為所有類都具有“數量”類。
let uniques = []
$('#productmathtable tr').each(function() {
// do we have this one yet?
let thisname = $(this).find('td').eq(0).text().trim()
let exists = uniques.findIndex(u => u.name.toLowerCase() === thisname.toLowerCase())
let q = $(this).find('.quantity').val();
let p = $(this).find('.productpricerow').val();
if (exists > -1) {
uniques[exists].quantity = q;
} else {
uniques.push({
name: thisname,
quantity: q,
price: p
});
}
$(this).remove();
})
uniques.forEach(o => {
let row = `<tr>
<td>${o.name}</td>
<td><input type="text" value="${o.quantity}" style="width:60px"> x <input type="text" value="${o.price}" style="width:60px"> = </td>
<td ><input type="text" value="${o.quantity * o.price}" style="width:60px"></td>
</tr>`;
$('#productmathtable').append(row)
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="productmathtable">
<tr>
<td>Shirt</td>
<td><input class="quantity" type="text" value="4" style="width:60px"> x <input class="productpricerow" type="text" value="25" style="width:60px"> = </td>
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="100" style="width:60px"></td>
</tr>
<tr>
<td>Shirt</td>
<td><input class="quantity" type="text" value="2" style="width:60px"> x <input class="productpricerow" type="text" value="25" style="width:60px"> = </td>
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="50" style="width:60px"></td>
</tr>
<tr>
<td>Shirt</td>
<td><input class="quantity" type="text" value="2" style="width:60px"> x <input class="productpricerow" type="text" value="25" style="width:60px"> = </td>
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="50" style="width:60px"></td>
</tr>
<tr>
<td>Hoodie</td>
<td><input class="quantity" type="text" value="4" style="width:60px"> x <input class="productpricerow" type="text" value="35" style="width:60px"> = </td>
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="140" style="width:60px"></td>
</tr>
<tr>
<td>Hoodie</td>
<td><input class="quantity" type="text" value="4" style="width:60px"> x <input class="productpricerow" type="text" value="35" style="width:60px"> = </td>
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="140" style="width:60px"></td>
</tr>
</table>uj5u.com熱心網友回復：
更具體地重新表述這個問題......似乎您是在說，對于某些類名串列中的每個類名，您想要進行以下轉換：
在#productmathtable 中查找所有包含具有給定類名的輸入的 tr；將第一個這樣的輸入的“value”屬性設定為匹配的“classname”輸入的“value”屬性的總和；類似地總結 producttotalrows 的“價值”屬性；然后洗掉其他匹配的 tr。
當然，如果可能的話，在創建 dom之前對原始資料進行這種操作會更容易。但是像下面的（未經測驗的）代碼應該可以解決問題......
// Get an array of all the tr's.
var trlist = $("#productmathtable > tr").toArray();
// Apply tranformation function for each classname.
["shirtcountrow", "hoodiecountrow"].forEach(
function(cname) {
var ctotal = 0;
var ptotal = 0;
var combined = null;
// Use Array.filter to get the set of matching tr's for this classname.
var subset = trlist.filter(function (tr) {
return ($("input." cname, tr).length > 0);
});
// Walk through this list, updating the dom as you go.
subset.forEach(function (tr) {
// Update cached values.
ctotal = parseInt($("input." cname, tr).attr("value"));
ptotal = parseInt($("input.producttotalrows", tr).attr("value"));
if (combined === null) {
// First item: just keep it, as-is.
combined = tr;
} else {
// Subsequent items...
// Update values in dom.
$("input." cname, combined).attr("value", ctotal);
$("input.producttotalrows", combined).attr("value", ptotal);
// Remove now-extraneous tr from dom.
$(tr).remove();
}
});
}
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/387810.html
標籤：javascript html 查询 形式
上一篇：如何僅在具有相同類名的div上顯示懸停，但僅在當前div上顯示
下一篇：前端獲取ajax呼叫進度狀態