JQuery總結具有唯一id元素的行

Question

我正在尋找一種方法來分別在每行的最后 2 個單元格中顯示所有輸入元素（數量和數量）的總和。 該表中的每個元素都有一個唯一的 id。 每個輸入元素都有一個 id，其中包含有關它出現在的行的信息：

 var trRows = ['tr2', 'tr3', 'tr4', 'tr5', 'tr6', 'tr7', 'tr8', 'tr9', 'tr10', 'tr11', 'tr12']; trRows.forEach(function(trRow) { var $sumQuantity = 0; var $sumAmount = 0; $(this).find('#tr' + trRow + 'input[id *= "qty"]').each(function() { $sumQuantity += +$(this).text() || 0; }); $(this).find('#tr' + trRow + 'input[id *= "amount"]').each(function() { $sumAmount += +$(this).text() || 0; }); $('#sumQtyTR' + trRows, this).html($sumQuantity); $('#sumAmountTR' + trRows, this).html($sumAmount); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr id='tr2'> <td id='td2_65'><span id='span_i2qty_65'><input id='input_i2qty_65' class='editbox'></span> </td> <td id='td2_65'><span id='span_i2amount_65'><input id='input_i2amount_65' class='editbox'></span> </td> <td id='td2_66'><span id='span_i2qty_66'><input id='input_i2qty_66' class='editbox'></span> </td> <td id='td2_66'><span id='span_i2amount_66'><input id='input_i2amount_66' class='editbox'></span> </td> <td id='sumQtyTR2'></td> <td id='sumAmountTR2'></td> </tr> <tr id='tr3'> <td id='td3_65'><span id='span_i3qty_65'><input id='input_i3qty_65' class='editbox'></span> </td> <td id='td3_65'><span id='span_i3amount_65'><input id='input_i3amount_65' class='editbox'></span> </td> <td id='td3_66'><span id='span_i3qty_66'><input id='input_i3qty_66' class='editbox'></span> </td> <td id='td3_66'><span id='span_i3amount_66'><input id='input_i3amount_66' class='editbox'></span> </td> <td id='sumQtyTR3'></td> <td id='sumAmountTR3'></td> </tr> <!-- More rows --> </table>

我不明白為什么不顯示總和。 選擇器？ 謝謝

Answer 1

建議

在您的代碼中，有一些興趣點可能值得考慮以減少混亂：

1. ID 旨在是唯一的。 永遠不應該出現在 HTML 文檔中不止一個地方使用 ID 的情況。 在您認為兩個或多個元素可能共享一個id ，您應該改用class
2. 除非您在其他地方使用 jQuery，否則您應該知道 jQuery 不是必需的。 它確實提供了幾個優點（包括跨瀏覽器合規性），但您應該考慮使用原生 JavaScript 和一個打包器來添加必要的 polyfills

---

例子

以下示例旨在在結構/設計上接近 OP 中的原始源代碼，以供學習之用； 但是需要注意的是，優化的方式有很多，可以提高性能和可讀性。

值得一提的一個要點是邏輯流程。 這些示例中的結構效率低下，因為每次更新輸入時，它都會循環並重新計算所有行的總和。 這可以通過僅計算和更新更改行的總和來改進。 此外，通過更多語義 HTML 和類的使用（如果需要有選擇性），可以更好地保存感興趣的行數組（例如row_ids ）。

下面的 jQuery 和 ES6+ 示例還進行了一些其他重大更改。 最值得注意的是 onChange 事件處理程序。 OP 中的代碼在頁面加載時立即迭代每個 ID，但不再重復。 需要有一個鈎子到某個事件中，當輸入框被修改時會被調用； 因此 onChange 或 onBlur 事件是必要的，以便重新計算值。

jQuery 示例

鑒於這兩個建議，我對您的 HTML 和 JavaScript 進行了一些重大更改，其中包括但不限於：

• 刪除了不必要的 ID 並添加了相應的類
• 使用 reduce 進行總和計算

 jQuery(document).ready(function($) { let row_ids = ['tr2', 'tr3', 'tr4', 'tr5', 'tr6', 'tr7', 'tr8', 'tr9', 'tr10', 'tr11', 'tr12']; function changeEventHandler() { $.each(row_ids, function(ndx, row_id) { const $row = $('#' + row_id) if (!$row.length) return; const quantity = $row.find('input.quantity').get().reduce(function(acc, input) { acc += parseFloat(input.value) || 0; return acc }, 0) const amount = $row.find('input.amount').get().reduce(function(acc, input) { acc += parseFloat(input.value) || 0; return acc }, 0) $row.find('.sum.quantity').text(quantity) $row.find('.sum.amount').text(amount) }); } $(document).on('change', 'input', changeEventHandler) })

 .sum { background: #eee; } th,td { vertical-align: bottom; white-space: nowrap; text-align: center; } table { width: 100%; } input { width: 40%; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Fill in each input with a number (watch sums auto-update): <table> <thead> <tr> <th>QTY 1</th> <th>AMT 1</th> <th>QTY 2</th> <th>AMT 2</th> <th>SUM QTY</th> <th>SUM AMT</th> </tr> </thead> <tbody> <tr id='tr2'> <!-- td: use class and not id --> <!-- remove unnecessary classes --> <td class="item_65"><span><input class='quantity'></span></td> <td class="item_65"><span><input class='amount'></span></td> <td class="item_66"><span><input class='quantity'></span></td> <td class="item_66"><span><input class='amount'></span></td> <td class="sum quantity"></td> <td class="sum amount"></td> </tr> <tr id='tr3'> <td class="item_65"><span><input class='quantity'></span></td> <td class="item_65"><span><input class='amount'></span></td> <td class="item_66"><span><input class='quantity'></span></td> <td class="item_66"><span><input class='amount'></span></td> <td class="sum quantity"></td> <td class="sum amount"></td> </tr> <!-- More rows --> </tbody> </table>

---

ES6+ 示例

鑒於這兩個建議，我對您的 HTML 和 JavaScript 進行了一些重大更改，其中包括但不限於：

• 刪除了不必要的 ID 並添加了相應的類
• 刪除了不必要的 jQuery 代碼（使用本機事件處理）
• 使用reduce進行總和計算
• 使用箭頭函數來簡化語法

注意：如前所述，該代碼可能不適用於所有瀏覽器（所有版本和變體），但應該適用於大多數較新的瀏覽器。 該代碼段將在大多數（如果不是全部）中工作，因為它被配置為使用 babel

 function changeEventHandler() { let row_ids = ['tr2', 'tr3', 'tr4', 'tr5', 'tr6', 'tr7', 'tr8', 'tr9', 'tr10', 'tr11', 'tr12']; // could iterate over the rows: // document.querySelectorAll(selector) // where selector is 'tr' or '[id^="tr"]' row_ids.forEach(row_id => { const row = document.querySelector(`#${row_id}`) if (row == null) return; const qty_el = row.querySelectorAll('input.quantity') const quantity = [...qty_el].reduce((acc, cv) => acc += parseFloat(cv.value) || 0, 0) const amt_el = row.querySelectorAll('input.amount') const amount = [...amt_el].reduce((acc, cv) => acc += parseFloat(cv.value) || 0, 0) row.querySelector('.sum.quantity').textContent = quantity row.querySelector('.sum.amount').textContent = amount }); } window.setTimeout(function() { document.querySelectorAll('input').forEach(() => this.onchange = changeEventHandler) },0);

 .sum { background: #eee; } th,td { vertical-align: bottom; white-space: nowrap; text-align: center; } table { width: 100%; } input { width: 40%; }

 Fill in each input with a number (watch sums auto-update): <table> <thead> <tr> <th>QTY 1</th> <th>AMT 1</th> <th>QTY 2</th> <th>AMT 2</th> <th>SUM QTY</th> <th>SUM AMT</th> </tr> </thead> <tbody> <tr id='tr2'> <!-- td: use class and not id --> <!-- remove unnecessary classes --> <td class="item_65"><span><input class='quantity'></span></td> <td class="item_65"><span><input class='amount'></span></td> <td class="item_66"><span><input class='quantity'></span></td> <td class="item_66"><span><input class='amount'></span></td> <td class="sum quantity"></td> <td class="sum amount"></td> </tr> <tr id='tr3'> <td class="item_65"><span><input class='quantity'></span></td> <td class="item_65"><span><input class='amount'></span></td> <td class="item_66"><span><input class='quantity'></span></td> <td class="item_66"><span><input class='amount'></span></td> <td class="sum quantity"></td> <td class="sum amount"></td> </tr> <!-- More rows --> </tbody> </table>