Подсчет строк таблицы HTML с помощью JavaScript

Быстрый ответ

Чтобы установить число строк в HTML-таблице, примените следующий код:

var rowCount = document.getElementById('myTable').rows.length;
console.log(rowCount); // Завершен подсчёт строк!

Команда document.getElementById выделяет требуемую таблицу, а свойство массива rows отвечает за число строк length.

Работа с разделами таблицы

Стоит учесть, что таблицы могут содержать разделы thead, tbody и tfoot, строки которых подсчитываются отдельно.

Подсчёт строк в thead

const theadRowCount = document.querySelector('#myTable thead').rows.length;
console.log(theadRowCount); // Подсчёт строк заголовка таблицы

Подробнее об этом расскажет наш спикер на видео

Подсчёт строк в tbody

const tbodyRowCount = document.querySelector('#myTable tbody').rows.length;
console.log(tbodyRowCount); // Подсчёт строк основного содержимого

Подсчёт строк в tfoot

const tfootRowCount = document.querySelector('#myTable tfoot').rows.length;
console.log(tfootRowCount); // Подсчёт строк нижнего колонтитула

Селекторы и передовые практики

Для повышения эффективности и чистоты кода применяйте best practices, например, определяйте неизменяемые переменные с помощью const и выбирайте наиболее оптимальный селектор.

const tableElementById = document.getElementById('myTable');
const tableElementByClass = document.getElementsByClassName('myTableClass')[0];
const tableElementByTag = document.getElementsByTagName('table')[0];

const rowCountById = tableElementById.rows.length;
const rowCountByClass = tableElementByClass.rows.length;
const rowCountByTag = tableElementByTag.rows.length;

Визуализация

Предположим, у нас есть HTML-таблица c подобным распределением мест:

Места: [🧍, 🧍, 🧍, пусто, 🧍]

Как подсчитать число занятых мест?

let occupiedSeats = document.querySelectorAll('table tr').length;

И получаем результат:

Занятые места: 4️⃣
// Кто без билета?

Таким образом, мы узнали количество занятых мест в таблице с помощью JavaScript.

Навигация по динамическим таблицам

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

Использование наблюдателя за мутациями

const table = document.getElementById('myTable');

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'childList') {
      console.log('Число строк:', table.rows.length);
    }
  });
});

observer.observe(table, { childList: true, subtree: true });

Использование слушателя событий

const table = document.getElementById('myTable'); 

table.addEventListener('DOMSubtreeModified', function() {
  console.log('Число строк:', table.rows.length);
});

Использование библиотек

Для простоты работы можно использовать библиотеку jQuery для выбора элементов и подсчёта строк.

jQuery

let rowCount = $('#myTable tr').length;
console.log(rowCount); // Подсчёт строк с помощью jQuery

Избегайте потенциальных подводных камней

Несмотря на кажущуюся лёгкость задачи, следует остерегаться некоторых тонкостей:

• Избегайте промахов, когда встречаются вложенные таблицы, которые могут сместить подсчёт.
• Обновляйте число строк после модификации данных.
• Точно выбирайте требуемый элемент по ID, классу или тегу.

Полезные материалы

1. MDN Web Docs – Table HTML Element — Основная информация об элементе <table> в HTML.
2. jQuery API Documentation – .length — Документация по свойству .length в библиотеке jQuery.
3. CSS-Tricks – Complete Guide to the Table Element — Подробное руководство по использованию и стилизации таблиц.
4. GitHub Gist – Simple JavaScript Table Row Count Code Snippet — Пример кода для подсчёта строк в таблице через JavaScript.
5. Stack Overflow – Count Number of Rows in a Table using JavaScript — Варианты подсчёта строк на популярном ресурсе для программистов.