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

时间：2019-01-29 16:25:35

标签： javascript jquery select html-table calculated-columns

我正在尝试创建一个使用得分系统的是/否调查表，该调查表会根据用户的选择自动计算总得分。每个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>

2 个答案:

答案 0 :(得分：0)

在这里，这些更改应该起作用。由于您已经在使用jQuery，因此我决定通过将所有内容更改为jQuery来简化代码，以使其更易于使用。

注意：您的html中也有微小变化。

要总结更改，您只是在第一次加载文档时加起来，所以我添加了一个sum函数，每次单击td时都会调用它。另外，现在，如果您要取消选中突出显示的td，则可以重新单击它。

jQuery简化了很多事情，就是找到其他元素很容易。使用siblings()，我可以轻松地选择每个td的同级。

最后一个更改是，我在您的html中添加了总行，并在其中添加了id，因此更改其值就像通过其id调用它并设置其文本一样简单。 / p>

如果您有任何疑问，请告诉我。

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

答案 1 :(得分：0)

首先，我删除了将cursor:pointer添加到TD的代码...可以使用CSS完成。

第二，我通过为$("#countit tr td:nth-child(3), #countit tr td:nth-child(2)");使用变量来减少了jQuery查找的数量。请注意#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上。

相关问题
最新问题