Обработчик jquery на 2-а события загрузки и изменения таблицы (table)

Question

Был обработчик на 1-о событие, который срабатывал при готовности таблицы:

$('friendTable').ready(function countVoters() {
        var table = document.getElementById('friendTable');
        var rows = table.rows;
        var total = 0;
       
        for (var i = 1, iLen = rows.length - 1; i <= iLen; i++) {
            var checked_ = table.rows[i].cells[18].getElementsByTagName('input')[0].checked;
            if (checked_ == true) {
                total += 1;
            }
        }
        document.getElementById('totalVoter').innerHTML = total.toFixed(0);
    })

Потом написал скрипт, который динамически обновляет таблицу, и мне понадобился обработчик, который бы реагировал и на загрузку таблицы и на её изменение. Попытался написать следующим образом:

$('friendTable').on('change','ready',function countVoters() {
        var table = document.getElementById('friendTable');
        var rows = table.rows;
        var total = 0;

        for (var i = 1, iLen = rows.length - 1; i <= iLen; i++) {
            var checked_ = table.rows[i].cells[18].getElementsByTagName('input')[0].checked;
            if (checked_ == true) {
                total += 1;
            }
        }
        document.getElementById('totalVoter').innerHTML = total.toFixed(0);
    })

Но так не срабатывает, управление на него переходит, но не каких действий не совершает и ошибок тоже никаких не выдает.

Подскажите где ошибка?

Answer 1

насколько я понял из кода, у вас есть таблица, и вы хотите посчитать количество отмеченных чекбоксов при старте страницы, а также при изменении этих флажков, при этом строки в таблицу могут добавляться налету.

Событие ready само по себе привязано не к конкретному элементу, а к документу целиком, и вызывается, когда завершено построение дерева DOM.
Форма записи on('ready') согласно документации помечена устаревшей еще в версии 1.8, а в 3.х исключена. В целом оптимальная форма записи - $(function(){....}).

Также у вас есть пара опечаток или неточностей, например, событие вы привешиваете на $("friendTable"), а не $("#friendTable"). Первый селектор описывает тэг, а не идентификатор, и соответственно возвращает пустой результат.

На этом собственно ваше использование jquery вообще заканчивается и начинается чистый js. Подключили библиотеку, так используйте ее возможности.

Приблизительно код подсчета числа отмеченных чекбоксов в столбце colIdx может выглядеть примерно так. Хотя варианты реализации могут быть различны.

function countCheckboxes(){
  const colIdx = 2;
  let t = $(`#t td:nth-child(${colIdx}) :checked`).length;
  $("#total").text(t);
}

$(function(){
  countCheckboxes();
  $("#t input").on('change',countCheckboxes);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table id="t">
  <tr>
    <td><input type="checkbox" checked></td>
    <td><input type="checkbox" checked></td>    
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>    
  </tr>
</table>

<span id="total"></span>

Если вы измените верстку и добавите этим чекбоксам соответствующий класс (условно c18), то дело станет еще более простым.

 let t = $(".c18:checked").length;  // подсчет

 $("#t").on('change', '.c18', countCheckboxes);  // привязка изменений только этих чеков

кстати говоря, в ваше втором варианте кода форма записи on('ready', 'change', func) соответствует добавлению обработчика func для события ready на элементе (селекторе) change.

БЛОГ НА HUSL

Обработчик jquery на 2-а события загрузки и изменения таблицы (table)

Ответы (1 шт):