Здесь эти изменения должны работать.Поскольку вы уже использовали jQuery, я решил упростить ваш код, изменив все на jQuery, что проще в использовании.
Примечание: В html также есть небольшие изменения.
Чтобы суммировать изменения, вы добавляли документ только при первой загрузке документа, поэтому ядобавлена функция суммы, которая вызывается при каждом нажатии td.Кроме того, теперь я разрешаю повторно щелкнуть выделенный тд, если вы хотите отменить его выбор.
Одна вещь, которая jQuery сильно упрощает, - это насколько легко найти другие элементы.Используя siblings(), я смог легко выбрать родственного брата каждого td.
Последнее изменение состояло в том, что я добавил итоговую строку в ваш HTML и добавил к ней 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’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> </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’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’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>