多个表中的值，多行，相同页面

Question

有一个网页，其中包含3个表格。 页面加载时的“ 总选择输出 ”是每个表的值，所有行，所有值的总和。

当选择表中的每个记录时，该行中的所有值应加在一起并从总计中减去。

如果选择了整个表，则应将所有行中的所有值相加并从“ Total Opt Out ”值中减去。

使用多个表，检查和取消检查记录/表，发现它很困难。 我发布了我的代码。 请告诉我如何解决这个问题？

代码如下：

 $(document).ready(function() { $("#countUS").click(function() { var table = document.getElementById("countryUS"); var val = table.rows[0].cells[0].children[0].checked; var totalCountUSA = 0; for (var i = 1; i < table.rows.length; i++) { table.rows[i].cells[0].children[0].checked = val; } if (val === true) { $('#countryUS :checked').each(function() { var totalAmount = $(this).parents('tr:eq(0)'); if ($(totalAmount).find('td:eq(2)').text() != '') { totalCountUSA += Number($(totalAmount).find('td:eq(2)').text().replace(/[^0-9.-]+/g, "")) + Number($(totalAmount).find('td:eq(3)').text().replace(/[^0-9.-]+/g, "")) + Number($(totalAmount).find('td:eq(4)').text().replace(/[^0-9.-]+/g, "")); } $('#totalOptOut').val(totalCountUSA); }); } else { $('#totalOptOut').val("0.00"); } }); }); function calculateTotal(countryCode) { var theTable = 0; var theTotal; var countChecked = 0; theTable = document.getElementById(countryCode); for (x = 0; x < theTable.tBodies[0].rows.length; x++) { for (y = 0; y < theTable.tBodies[0].rows[x].cells[0].children.length; y++) { if (theTable.tBodies[0].rows[x].cells[0].children[y].tagName.toUpperCase() == "INPUT") { if (theTable.tBodies[0].rows[x].cells[0].children[y].type.toUpperCase() == "CHECKBOX") { if (theTable.tBodies[0].rows[x].cells[0].children[y].checked == false) { if (theTable.tBodies[0].rows[x].cells[2].textContent) { theTotal += (parseFloat(theTable.tBodies[0].rows[x].cells[2].textContent.toString().replace(/\\$|\\,/g, '')) + parseFloat(theTable.tBodies[0].rows[x].cells[3].textContent.toString().replace(/\\$|\\,/g, '')) + parseFloat(theTable.tBodies[0].rows[x].cells[4].textContent.toString().replace(/\\$|\\,/g, '')) + parseFloat(theTable.tBodies[0].rows[x].cells[5].textContent.toString().replace(/\\$|\\,/g, ''))); } else { theTotal += (parseFloat(theTable.tBodies[0].rows[x].cells[2].innerText.toString().replace(/\\$|\\,/g, '')) + parseFloat(theTable.tBodies[0].rows[x].cells[3].innerText.toString().replace(/\\$|\\,/g, '')) + parseFloat(theTable.tBodies[0].rows[x].cells[4].innerText.toString().replace(/\\$|\\,/g, '')) + parseFloat(theTable.tBodies[0].rows[x].cells[5].innerText.toString().replace(/\\$|\\,/g, ''))); } countChecked++; } break; } } } } if (countChecked === theTable.tBodies[0].rows.length) { if (countryCode === countryUS) document.getElementById("countUS").checked = true; else if (countryCode === countryCAN) document.getElementById("countUS").checked = true; } else { if (countryCode === countryUS) document.getElementById("countUS").checked = false; else if (countryCode === countryCAN) document.getElementById("countUS").checked = false; } $("totalOptOut").val(theTotal); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> Total Opt Out: <input type="text" id="totalOptOut" value="24750" disabled> </p> <table id="countryUS"> <thead> <tr> <th><input type="checkbox" id="countUS"> </th> <th>State</th> <th>Men</th> <th>Women</th> <th>Kids (Under age 12)</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td><input type="text" name="state" value="Texas" disabled></td> <td><input type="text" name="men" value="1000" disabled></td> <td><input type="text" name="women" value="1000" disabled></td> <td><input type="text" name="kids" value="750" disabled></td> </tr> <tr> <td><input type="checkbox"></td> <td><input type="text" name="state" value="Arkansas" disabled></td> <td><input type="text" name="men" value="1000" disabled></td> <td><input type="text" name="women" value="1000" disabled></td> <td><input type="text" name="kids" value="750" disabled></td> </tr> <tr> <td><input type="checkbox"></td> <td><input type="text" name="state" value="Arizona" disabled></td> <td><input type="text" name="men" value="1000" disabled></td> <td><input type="text" name="women" value="1000" disabled></td> <td><input type="text" name="kids" value="750" disabled></td> </tr> </tbody> </table> <table id="countryCAN"> <thead> <tr> <th><input type="checkbox"> </th> <th>State</th> <th>Men</th> <th>Women</th> <th>Kids (Under age 12)</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td><input type="text" name="province" value="Ontario" disabled></td> <td><input type="text" name="men" value="1000" disabled></td> <td><input type="text" name="women" value="1000" disabled></td> <td><input type="text" name="kids" value="750" disabled></td> </tr> <tr> <td><input type="checkbox"></td> <td><input type="text" name="province" value="Qubec" disabled></td> <td><input type="text" name="men" value="1000" disabled></td> <td><input type="text" name="women" value="1000" disabled></td> <td><input type="text" name="kids" value="750" disabled></td> </tr> <tr> <td><input type="checkbox"></td> <td><input type="text" name="province" value="Alberta" disabled></td> <td><input type="text" name="men" value="1000" disabled></td> <td><input type="text" name="women" value="1000" disabled></td> <td><input type="text" name="kids" value="750" disabled></td> </tr> </tbody> </table> <table id="countryMEX"> <thead> <tr> <th><input type="checkbox"> </th> <th>State</th> <th>Men</th> <th>Women</th> <th>Kids (Under age 12)</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" /></td> <td><input type="text" name="state" value="Jalisco" disabled></td> <td><input type="text" name="men" value="1000" disabled></td> <td><input type="text" name="women" value="1000" disabled></td> <td><input type="text" name="kids" value="750" disabled></td> </tr> <tr> <td><input type="checkbox" /></td> <td><input type="text" name="state" value="Puebla" disabled></td> <td><input type="text" name="men" value="1000" disabled></td> <td><input type="text" name="women" value="1000" disabled></td> <td><input type="text" name="kids" value="750" disabled></td> </tr> <tr> <td><input type="checkbox" /></td> <td><input type="text" name="state" value="Oaxaca" disabled></td> <td><input type="text" name="men" value="1000" disabled></td> <td><input type="text" name="women" value="1000" disabled></td> <td><input type="text" name="kids" value="750" disabled></td> </tr> </tbody> </table> 

Answer 1

由于您使用的是jQuery，因此可以使用一些额外的类来实现：

 $(document).ready(function() { var inputs_selector = '[name="men"],[name="women"],[name="kids"]'; //Check the clicked table rows $(".check").change(function() { var inputs = $(this).closest('tr').find(inputs_selector); if ($(this).is(':checked')) { inputs.addClass('selected'); } else { inputs.removeClass('selected'); } calculateTotal(); }); //Check all the table rows $(".check-all").click(function() { var self = $(this); $(this).closest('table').find(':checkbox').not(this).each(function() { $(this).prop('checked', self.is(':checked')).change() }) calculateTotal(); }); calculateTotal(); }); //Calculate the total of all tables function calculateTotal() { var total = 0; var inputs_selector = '[name="men"]:not(".selected"),[name="women"]:not(".selected"),[name="kids"]:not(".selected")'; $('table').each(function() { var inputs = $(this).find(inputs_selector); inputs.each(function() { total += Number($(this).val()); }); }) $('#totalOptOut').val(total); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> Total Opt Out: <input type="text" id="totalOptOut" value="0" disabled> </p> <table id="countryUS"> <thead> <tr> <th><input type="checkbox" class='check-all' id="countUS"> </th> <th>State</th> <th>Men</th> <th>Women</th> <th>Kids (Under age 12)</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" class='check'></td> <td><input type="text" name="state" value="Texas" disabled></td> <td><input type="text" name="men" value="1000" disabled></td> <td><input type="text" name="women" value="1000" disabled></td> <td><input type="text" name="kids" value="750" disabled></td> </tr> <tr> <td><input type="checkbox" class='check'></td> <td><input type="text" name="state" value="Arkansas" disabled></td> <td><input type="text" name="men" value="1000" disabled></td> <td><input type="text" name="women" value="1000" disabled></td> <td><input type="text" name="kids" value="750" disabled></td> </tr> <tr> <td><input type="checkbox" class='check'></td> <td><input type="text" name="state" value="Arizona" disabled></td> <td><input type="text" name="men" value="1000" disabled></td> <td><input type="text" name="women" value="1000" disabled></td> <td><input type="text" name="kids" value="750" disabled></td> </tr> </tbody> </table> <table id="countryCAN"> <thead> <tr> <th><input type="checkbox" class='check-all'> </th> <th>State</th> <th>Men</th> <th>Women</th> <th>Kids (Under age 12)</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" class='check'></td> <td><input type="text" name="province" value="Ontario" disabled></td> <td><input type="text" name="men" value="1000" disabled></td> <td><input type="text" name="women" value="1000" disabled></td> <td><input type="text" name="kids" value="750" disabled></td> </tr> <tr> <td><input type="checkbox" class='check'></td> <td><input type="text" name="province" value="Qubec" disabled></td> <td><input type="text" name="men" value="1000" disabled></td> <td><input type="text" name="women" value="1000" disabled></td> <td><input type="text" name="kids" value="750" disabled></td> </tr> <tr> <td><input type="checkbox" class='check'></td> <td><input type="text" name="province" value="Alberta" disabled></td> <td><input type="text" name="men" value="1000" disabled></td> <td><input type="text" name="women" value="1000" disabled></td> <td><input type="text" name="kids" value="750" disabled></td> </tr> </tbody> </table> <table id="countryMEX"> <thead> <tr> <th><input type="checkbox" class='check-all'> </th> <th>State</th> <th>Men</th> <th>Women</th> <th>Kids (Under age 12)</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" class='check' /></td> <td><input type="text" name="state" value="Jalisco" disabled></td> <td><input type="text" name="men" value="1000" disabled></td> <td><input type="text" name="women" value="1000" disabled></td> <td><input type="text" name="kids" value="750" disabled></td> </tr> <tr> <td><input type="checkbox" class='check' /></td> <td><input type="text" name="state" value="Puebla" disabled></td> <td><input type="text" name="men" value="1000" disabled></td> <td><input type="text" name="women" value="1000" disabled></td> <td><input type="text" name="kids" value="750" disabled></td> </tr> <tr> <td><input type="checkbox" class='check' /></td> <td><input type="text" name="state" value="Oaxaca" disabled></td> <td><input type="text" name="men" value="1000" disabled></td> <td><input type="text" name="women" value="1000" disabled></td> <td><input type="text" name="kids" value="750" disabled></td> </tr> </tbody> </table>