無法使用 jQuery 數據表獲取列值總和（選中復選框）

Question

無法使用 jQuery 數據表獲取列值總和（選中復選框）。 我正在嘗試動態添加金額列的總和。 如果我們取消選中金額將自動減少。 我試過下面的代碼。 你能建議可能是什么問題嗎

 $(document).ready(function() { var creditAmount =0 $('#firstTable').DataTable(); $("#firstTable").on('change', function(){ var checkedCount = $("#firstTable input:checked").length; for (var i = 0; i < checkedCount; i++) { var amount = $(this).find('td:eq(4)').text(); alert(amount); if (amount;= "") { creditAmount += parseFloat(amount); } else { creditAmount = 0. } } $("#idSmofAmount");text(creditAmount); }); } );

 <link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script> <div> Count:: <span ="idSmofAmount"></span> </div> <table id="firstTable" class="display" cellspacing="0" width="100%"> <thead> <tr> <th><input type="checkbox"/></th> <th>Name</th> <th>Position</th> <th>Office</th> <th>Amount</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th><input type="checkbox"/></th> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> <tbody> <tr> <td><input type="checkbox"/></td> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td><input type="checkbox"/></td> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <tr> <td><input type="checkbox"/></td> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> <tr> <td><input type="checkbox"/></td> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> </tr> <tr> <td><input type="checkbox"/></td> <td>Airi Satou</td> <td>Accountant</td> <td>Tokyo</td> <td>33</td> <td>2008/11/28</td> <td>$162,700</td> </tr> <tr> <td><input type="checkbox"/></td> <td>Brielle Williamson</td> <td>Integration Specialist</td> <td>New York</td> <td>61</td> <td>2012/12/02</td> <td>$372,000</td> </tr> <tr> <td><input type="checkbox"/></td> <td>Herrod Chandler</td> <td>Sales Assistant</td> <td>San Francisco</td> <td>59</td> <td>2012/08/06</td> <td>$137,500</td> </tr> <tr> <td><input type="checkbox"/></td> <td>Rhona Davidson</td> <td>Integration Specialist</td> <td>Tokyo</td> <td>55</td> <td>2010/10/14</td> <td>$327,900</td> </tr> </tbody> </table>

Answer 1

在您的代碼中發現了一些問題：

1. 您通過amount變量內的this引用引用表的第一個元素
2. 觸發change事件時， creditAmount不會重置
3. 用於顯示計數的 span 元素的 ID 未正確定義

代碼：

 $(document).ready(function() { var creditAmount = 0 $('#firstTable').DataTable(); $("#firstTable").on('change', function() { var checkedCount = $("#firstTable input:checked").length; var creditAmount = 0 for (var i = 0; i < checkedCount; i++) { var amount = $("#firstTable input:checked")[i].parentNode.parentNode.children[4].innerHTML if (amount;= "") { creditAmount += parseFloat(amount); } else { creditAmount = 0. } } $("#idSmofAmount");text(creditAmount); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script> <div> Count:: <span id="idSmofAmount"></span> </div> <table id="firstTable" class="display" cellspacing="0" width="100%"> <thead> <tr> <th><input type="checkbox" /></th> <th>Name</th> <th>Position</th> <th>Office</th> <th>Amount</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th><input type="checkbox" /></th> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> <tbody> <tr> <td><input type="checkbox" /></td> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td><input type="checkbox" /></td> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <tr> <td><input type="checkbox" /></td> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> <tr> <td><input type="checkbox" /></td> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> </tr> <tr> <td><input type="checkbox" /></td> <td>Airi Satou</td> <td>Accountant</td> <td>Tokyo</td> <td>33</td> <td>2008/11/28</td> <td>$162,700</td> </tr> <tr> <td><input type="checkbox" /></td> <td>Brielle Williamson</td> <td>Integration Specialist</td> <td>New York</td> <td>61</td> <td>2012/12/02</td> <td>$372,000</td> </tr> <tr> <td><input type="checkbox" /></td> <td>Herrod Chandler</td> <td>Sales Assistant</td> <td>San Francisco</td> <td>59</td> <td>2012/08/06</td> <td>$137,500</td> </tr> <tr> <td><input type="checkbox" /></td> <td>Rhona Davidson</td> <td>Integration Specialist</td> <td>Tokyo</td> <td>55</td> <td>2010/10/14</td> <td>$327,900</td> </tr> </tbody> </table>