使用Jquery / Javascript选择表格元素并计算总价值

Question

I'm trying to create a yes/no questionnaire that uses a point system, and which automatically calculates the total points based on what the user chooses. Each yes td and no td has a number of points assigned to it, and so when the user completes the questionairre they should have a number of total points.

I'm having difficulty:

A) making the highlight function select only the yes or no for each row;

B) making only either the selected yes or no integer be used in the calculation function for each row--instead, the calculation function is summing up all of the TDs with numbers in it.

See 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

Here, these changes should work. Since you were already using jQuery I decided to simplify your code by changing everything to jQuery which is easier to use.

Note: There is a minor change in your html as well.

To summarized the changes, you were only adding up the first time the document loaded, so I added a sum function that is called every time a td is clicked. Also, now I am allowing to re-click a highlighted td if you want to unselect it.

One thing that jQuery simplifies a lot, is how easy it is to find other elements. Using siblings() I was able to easily select each td's sibling.

The last change, was that I added the total line in your html and added an id to it, so that changing it's value would be as simple as simply calling it by it's id and setting it's text.

If you have any question, please let me know.

 $(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

First, I removed the code where you simply add the cursor:pointer to the TDs... Can be done with CSS.

Second, I reduced the amount of jQuery lookups by using a variable for $("#countit tr td:nth-child(3), #countit tr td:nth-child(2)"); . Notice the repetition of #countit tr ... When you use multiple selectors, they all are independents.

Third, I place the count loop within the click handler... Since you wish the total to be updated on each click... Not just on page load.

See comments in code for the rest.

 $(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> 

Also on CodePen .