时间戳

首页 > 解决方案 > 使用 Jquery/Javascript 选择表格元素并计算总值

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

问题描述

我正在尝试创建一个使用积分系统的是/否问卷，它会根据用户的选择自动计算总分。每个 yes td 和 no td 都分配了一些分数，因此当用户完成问题时，他们应该有一些总分。

我有困难：

A) 使高亮功能只为每一行选择是或否；

B) 只在每一行的计算函数中使用选定的是或否整数——相反，计算函数将所有带有数字的 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>

标签： javascriptjqueryselecthtml-tablecalculated-columns

解决方案

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

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

为了总结更改，您只是在第一次加载文档时加起来，所以我添加了一个 sum 函数，每次td单击 a 时都会调用该函数。另外，如果您想取消选择它，现在我允许重新单击突出显示的 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>

推荐阅读