0

Был обработчик на 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);
    })

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

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

5
  • наничте с того. чтобы обратиться к документации метода on и посмотреть, в каком виде передается параметр, описывающий имена событий. Не ясно почему вы решили просто напихать параметров-строк в начало вызова функции.
    – teran
    21 апр 2021 в 9:33
  • @teran, в интернете встречал примеры, где в 1-ом обработчике указывалось сразу несколько событий, на которые он должен реагировать. Так нельзя делать?
    – Vlad-i-mir
    21 апр 2021 в 9:42
  • @teran, прочитал здесь api.jquery.com/on, что они должны быть разделены пробелами и в 1-ой строке. Попробовал так сделать '$('friendTable').on('change ready', function countVoters() {' - результат тот же
    – Vlad-i-mir
    21 апр 2021 в 10:31
  • "Был обработчик на 1-о событие, который срабатывал" - не срабатывал.
    – user176262
    21 апр 2021 в 13:24
  • @Igor, если он не срабатывал, то как же считалось количество и записывалось в нужный объект? Через отладчик проверял.
    – Vlad-i-mir
    22 апр 2021 в 7:30

1 ответ 1

2

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

Событие 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.

3
  • c $("#friendTable"), но когда был 1-н обработчик он почему-то все равно работал )
    – Vlad-i-mir
    22 апр 2021 в 7:27
  • @Vlad-i-mir версия jquery позволяла значит.
    – teran
    22 апр 2021 в 7:29
  • я не знаю jquery, поэтому пишу на обычном js )
    – Vlad-i-mir
    22 апр 2021 в 7:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.