JQuery总结具有唯一id元素的行

Question

I'm looking for a way to display the sum of all the input elements (quantity and amount) respectively in the last 2 cells of each line. Every element in this table has a unique id. Each input element has an id that contains information about the row it appears in :

 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>

I can't figure out why sums are not displayed. Selectors ? Thanks

Answer 1

Recommendations

Within your code there are a few points of interest that may be worth consideration to reduce the clutter:

1. IDs are intended to be unique. There should never be a time where an ID is used in more than one place in an HTML document. In places where you think two or more elements might share an id , you should use a class instead
2. Unless you are using jQuery elsewhere, you should know that jQuery is not necessary. It does provide several advantages (including cross-browser compliance), but you should consider using native JavaScript and a packager that will add the necessary polyfills

---

Examples

The examples below are intended to be close in structure/design to the original source code in the OP for learning purposes; however, it should be noted that there are many ways to optimize to improve performance and readability.

One major point worth mentioning is in the logic flow. The structure in these examples are inefficient, since every time an input is updated it is looping over and recalculating sums for all of the rows. This could be improved by only calculating and updating the sum of the altered row. Additionally, holding an array of interested rows (eg, row_ids ) could be better improved with more semantic HTML and the use of classes (if needing to be selective).

There are some other major changes made to both the jQuery and ES6+ example below. Most notably is the onChange event handler. The code in the OP iterated over each ID immediately on page load, but never again. There needed to be a hook into some event that would be called when the input box was modified; thus the onChange or onBlur event is necessary in order to re-calculate the values.

jQuery Example

Given these two recommendations, I've made some substantial changes to your HTML and JavaScript, which include but are not limited to:

• removed unnecessary IDs and added respective classes
• use reduce for sum calculation

 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+ Example

Given the two recommendations, I've made some substantial changes to your HTML and JavaScript, which include but are not limited to:

• removed unnecessary IDs and added respective classes
• removed unnecessary jQuery code (used native event handling)
• use reduce for sum calculation
• use arrow functions for simplified syntax

Note: as mentioned prior, the code may not work in all browsers (all versions and variations), but should work in most of the newer browsers. The snippet will work in most (if not all) because it is configured to use 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>