使用Jquery / Javascript選擇表格元素並計算總價值

Question

我正在嘗試創建一個使用分數系統的是/否問卷，該問卷會根據用戶的選擇自動計算總分數。 每個yes td和no td都分配有許多分數，因此，當用戶完成Questionairre時，他們應該擁有若干總分數。

我遇到困難：

A）使高亮功能為每一行選擇是或否；

B）在每一行的計算函數中僅使用選定的yes或no整數-而是，該計算函數將所有帶有數字的TD求和。

參見codepen： https ://codepen.io/froglegg/pen/yZJGbr

 //Javascript/Jquery //this adds a cursor-pointer over 2nd and 3rd td children of tr $(document).ready(function() { $("#countit tr td:nth-child(3), td:nth-child(2)").mouseover(function(e) { $(this).css("cursor", "pointer"); }); //this adds the function for removing the highlight; what selector should I use to make sure the class is removed from only the current row? $("#countit tr td:nth-child(3), td:nth-child(2)").click(function(e) { $("#countit tr td:nth-child(3), td:nth-child(2)").removeClass("highlight"); //this constructs a variable that makes the 2nd and 3rd td children event targets... I think. var clickedCell= $(e.target).closest("td:nth-child(3), td:nth-child(2)"); // this adds a highlight class to the clickedCell variable constructed above... then outputs the text of that cell as html... clickedCell.addClass("highlight"); $("#spnText").html( 'Clicked table cell value is: <b> ' + clickedCell.text() + '</b>'); }); }); //this is the summing function I found, constructs a tds variable from td elements. I've tried to add the 'highlight' class to the selector, so that only cells that have been highlighted by the functions above will be calculated, doesn't seem to have an effect, however... var tds = document.getElementById('countit').getElementsByTagName('td'); var sum = 0; for(var i = 0; i < tds.length; i ++) { if(tds[i].className == 'count-me' && 'highlight') { sum += isNaN(tds[i].innerHTML) ? 0 : parseInt(tds[i].innerHTML); } } //this outputs the sum total of the tds document.getElementById('countit').innerHTML += '<br><tr><td><div class="section-content">YOUR TOTAL POINTS [' + sum + ']</div></td><td></td><td></td></tr>'; 

 table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } th { background-color: #ccd; } tr:nth-child(even) { background-color: #dddddd; } tr:nth-child(odd) { background-color: #ddeedd; } .highlight { background-color: Yellow; color: Green; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <h2 class="section-title">Risk Checklist</h2> <div class="section-content"> <p class="section-content">Use this 11-question checklist to get a better idea of your portfolio&rsquo;s risk exposure and see where you may be able to make changes that help you generate more ancillary revenue, increase leasing office efficiency and reduce resident-caused risk. </p> <table class="table table-striped k-table" id="countit"> <thead> <tr> <th>&nbsp;</th> <th>YES</th> <th>NO</th> </tr> </thead> <tbody style=""> <tr style=""> <td>1. Do you require liability coverage in your lease at your properties?</td> <td class="count-me">0</td> <td class="count-me">75</td> </tr> <tr style=""> <td style="">2. If yes, do you have a method of ensuring residents maintain liability coverage throughout the course of their lease?</td> <td class="count-me">0</td> <td class="count-me">75</td> </tr> <tr style=""> <td>3. If yes, do you have a preferred provider for renters insurance and liability coverage?</td> <td class="count-me">0</td> <td class="count-me">10</td> </tr> <tr style=""> <td>4. If yes, does your management team and property staff understand what your preferred partner&rsquo;s program covers?</td> <td class="count-me">0</td> <td class="count-me">10</td> </tr> <tr style=""> <td>5. Since you or your preferred partner implemented liability coverage requirements, have you had an uninsured loss caused by a resident that resulted in fire, smoke, explosion or water damage to the property?</td> <td class="count-me">30</td> <td class="count-me">0</td> </tr> <tr style=""> <td style="">6. Do residents have easy access to purchase an insurance policy from your preferred partner via website, mobile, phone and/or point of lease enrollment?</td> <td class="count-me">0</td> <td class="count-me">5</td> </tr> <tr> <td>7. Do the majority of residents choose your preferred partner&rsquo;s policies?</td> <td class="count-me">0</td> <td class="count-me">5</td> </tr> <tr style=""> <td>8. Do you feel your site staff spends too much time managing or following up with residents to ensure they meet their lease requirements for liability coverage?</td> <td class="count-me">5</td> <td class="count-me">0</td> </tr> <tr style=""> <td style="">9. Do you believe you wrote off too much bad debt last year?</td> <td class="count-me">35</td> <td class="count-me">0</td> </tr> <tr style=""> <td>10. Do you believe that your collections company should be recovering more from delinquent residents?</td> <td class="count-me">35</td> <td class="count-me">0</td> </tr> <tr> <td>11. Do you feel that you should get better support, have better preferred partner take rates, more ancillary revenue, and have less site staff workload with your renters insurance program?</td> <td class="count-me">35</td> <td class="count-me">0</td> </tr> </tbody> </table> </div> </div> <br/> <span id="spnText"></span> 

Answer 1

在這里，這些更改應該起作用。 既然你已經在使用jQuery ，我決定改變一切，簡化代碼jQuery是更容易使用。

注意：您的html也有較小的更改。

為了概括這些更改，您只是在第一次加載文檔時加起來，所以我添加了一個sum函數，每次單擊td時都會調用它。 另外，如果您要取消選中突出顯示的td，現在可以重新單擊它。

jQuery簡化了很多事情，就是找到其他元素很容易。 使用siblings()我能夠輕松地選擇每個td的兄弟姐妹。

最后一個更改是，我在您的html中添加了總行並為其添加了id ，因此更改其值就像通過其ID調用它並設置其文本一樣簡單。

如果您有任何疑問，請告訴我。

 $(document).ready(function() { $("#countit tr td:nth-child(3), td:nth-child(2)").mouseover(function(e) { $(this).css("cursor", "pointer"); }); $('.count-me').on('click', function() { var sibling = $(this).siblings('.count-me'); if($(sibling).hasClass('highlight')) { sibling.removeClass('highlight'); } if($(this).hasClass('highlight')) { $(this).removeClass('highlight'); } else { $(this).addClass('highlight'); } sumTotals(); }); function sumTotals() { var sum = 0; $('.count-me').each(function() { if($(this).hasClass('highlight')) { sum += parseInt($(this).text()); } }) $('#total').text(sum); } }); 

 table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } th { background-color: #ccd; } tr:nth-child(even) { background-color: #dddddd; } tr:nth-child(odd) { background-color: #ddeedd; } .highlight { background-color: Yellow; color: Green; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <h2 class="section-title">Risk Checklist</h2> <div class="section-content"> <p class="section-content">Use this 11-question checklist to get a better idea of your portfolio&rsquo;s risk exposure and see where you may be able to make changes that help you generate more ancillary revenue, increase leasing office efficiency and reduce resident-caused risk. </p> <table class="table table-striped k-table" id="countit"> <thead> <tr> <th>&nbsp;</th> <th>YES</th> <th>NO</th> </tr> </thead> <tbody style=""> <tr style=""> <td>1. Do you require liability coverage in your lease at your properties?</td> <td class="count-me">0</td> <td class="count-me">75</td> </tr> <tr style=""> <td style="">2. If yes, do you have a method of ensuring residents maintain liability coverage throughout the course of their lease?</td> <td class="count-me">0</td> <td class="count-me">75</td> </tr> <tr style=""> <td>3. If yes, do you have a preferred provider for renters insurance and liability coverage?</td> <td class="count-me">0</td> <td class="count-me">10</td> </tr> <tr style=""> <td>4. If yes, does your management team and property staff understand what your preferred partner&rsquo;s program covers?</td> <td class="count-me">0</td> <td class="count-me">10</td> </tr> <tr style=""> <td>5. Since you or your preferred partner implemented liability coverage requirements, have you had an uninsured loss caused by a resident that resulted in fire, smoke, explosion or water damage to the property?</td> <td class="count-me">30</td> <td class="count-me">0</td> </tr> <tr style=""> <td style="">6. Do residents have easy access to purchase an insurance policy from your preferred partner via website, mobile, phone and/or point of lease enrollment?</td> <td class="count-me">0</td> <td class="count-me">5</td> </tr> <tr> <td>7. Do the majority of residents choose your preferred partner&rsquo;s policies?</td> <td class="count-me">0</td> <td class="count-me">5</td> </tr> <tr style=""> <td>8. Do you feel your site staff spends too much time managing or following up with residents to ensure they meet their lease requirements for liability coverage?</td> <td class="count-me">5</td> <td class="count-me">0</td> </tr> <tr style=""> <td style="">9. Do you believe you wrote off too much bad debt last year?</td> <td class="count-me">35</td> <td class="count-me">0</td> </tr> <tr style=""> <td>10. Do you believe that your collections company should be recovering more from delinquent residents?</td> <td class="count-me">35</td> <td class="count-me">0</td> </tr> <tr> <td>11. Do you feel that you should get better support, have better preferred partner take rates, more ancillary revenue, and have less site staff workload with your renters insurance program?</td> <td class="count-me">35</td> <td class="count-me">0</td> </tr> </tbody> <br><tr><td><div class="section-content">YOUR TOTAL POINTS <font id="total">0</font></div></td><td></td><td></td></tr> </table> </div> </div> <br/> <span id="spnText"></span> 

Answer 2

首先，我刪除了僅將cursor:pointer添加到TD的代碼...可以使用CSS完成。

其次，通過為$("#countit tr td:nth-child(3), #countit tr td:nth-child(2)");使用變量來減少jQuery查找的數量$("#countit tr td:nth-child(3), #countit tr td:nth-child(2)"); 。 請注意#countit tr的重復。當您使用多個選擇器時，它們都是獨立的。

第三，我將計數循環放置在點擊處理程序中...因為您希望每次點擊都更新總數...而不只是頁面加載。

其余部分請參見代碼中的注釋。

 $(document).ready(function() { // Use a variable to reduce the amount of jQuery lookups. var yesNoColumns = $("#countit tr td:nth-child(3), #countit tr td:nth-child(2)"); // Click handler on yes/no yesNoColumns.click(function(e) { // $(this) is the clicked TD var clickedCell= $(this); // Remove any previou highlights on the clicked row clickedCell.parent("tr").find("td:nth-child(3), td:nth-child(2)").removeClass("highlight"); // Add the highlight on the clicked cell clickedCell.addClass("highlight"); // Show the value of the clicked cell $("#spnText").html( 'Clicked table cell value is: <b> ' + clickedCell.text() + '</b>'); // This looksup for all yes/no cells var tds = $('#countit').find('td.count-me'); // Count the sum on every click (That why the loop now is in the click handler) var sum = 0; for(var i = 0; i < tds.length; i ++) { if(tds.eq(i).hasClass('count-me') && tds.eq(i).hasClass('highlight') ) { sum += isNaN(tds.eq(i).text()) ? 0 : parseInt(tds.eq(i).text()); } } // This outputs the sum total of the tds. // Only the .sum SPAN is updated $('.sum').text(sum); }); }); 

 table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } th { background-color: #ccd; } tr:nth-child(even) { background-color: #dddddd; } tr:nth-child(odd) { background-color: #ddeedd; } .highlight { background-color: Yellow; color: Green; } /* Added CSS rule */ #countit tr td:nth-child(3), #countit tr td:nth-child(2){ cursor:pointer; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <br /><br /> <div class="container"> <h2 class="section-title">Risk Checklist</h2> <div class="section-content"> <p class="section-content">Use this 11-question checklist to get a better idea of your portfolio&rsquo;s risk exposure and see where you may be able to make changes that help you generate more ancillary revenue, increase leasing office efficiency and reduce resident-caused risk. </p> <table class="table table-striped k-table" id="countit"> <thead> <tr> <th>&nbsp;</th> <th>YES</th> <th>NO</th> </tr> </thead> <tbody style=""> <tr style=""> <td>1. Do you require liability coverage in your lease at your properties?</td> <td class="count-me">0</td> <td class="count-me">75</td> </tr> <tr style=""> <td style="">2. If yes, do you have a method of ensuring residents maintain liability coverage throughout the course of their lease?</td> <td class="count-me">0</td> <td class="count-me">75</td> </tr> <tr style=""> <td>3. If yes, do you have a preferred provider for renters insurance and liability coverage?</td> <td class="count-me">0</td> <td class="count-me">10</td> </tr> <tr style=""> <td>4. If yes, does your management team and property staff understand what your preferred partner&rsquo;s program covers?</td> <td class="count-me">0</td> <td class="count-me">10</td> </tr> <tr style=""> <td>5. Since you or your preferred partner implemented liability coverage requirements, have you had an uninsured loss caused by a resident that resulted in fire, smoke, explosion or water damage to the property?</td> <td class="count-me">30</td> <td class="count-me">0</td> </tr> <tr style=""> <td style="">6. Do residents have easy access to purchase an insurance policy from your preferred partner via website, mobile, phone and/or point of lease enrollment?</td> <td class="count-me">0</td> <td class="count-me">5</td> </tr> <tr> <td>7. Do the majority of residents choose your preferred partner&rsquo;s policies?</td> <td class="count-me">0</td> <td class="count-me">5</td> </tr> <tr style=""> <td>8. Do you feel your site staff spends too much time managing or following up with residents to ensure they meet their lease requirements for liability coverage?</td> <td class="count-me">5</td> <td class="count-me">0</td> </tr> <tr style=""> <td style="">9. Do you believe you wrote off too much bad debt last year?</td> <td class="count-me">35</td> <td class="count-me">0</td> </tr> <tr style=""> <td>10. Do you believe that your collections company should be recovering more from delinquent residents?</td> <td class="count-me">35</td> <td class="count-me">0</td> </tr> <tr> <td>11. Do you feel that you should get better support, have better preferred partner take rates, more ancillary revenue, and have less site staff workload with your renters insurance program?</td> <td class="count-me">35</td> <td class="count-me">0</td> </tr> <!-- add the total points row here --> <tr> <td> <div class="section-content">YOUR TOTAL POINTS <span class="sum">0</span></div> </td> <td></td> <td></td> </tr> </tbody> </table> </div> </div> <br/> <span id="spnText"></span> 

同樣在CodePen上 。