24.03.2025

Contando Linhas em uma Tabela HTML Usando JavaScript

Resposta Rápida

Para determinar o número de linhas em uma tabela HTML, use o seguinte código:

var rowCount = document.getElementById('minhaTabela').rows.length;
console.log(rowCount); // Contagem de linhas concluída!

O comando document.getElementById direciona para a tabela requerida, e a propriedade de array rows é responsável pela quantidade de linhas length.

Trabalhando com Seções de Tabelas

Vale considerar que as tabelas podem conter seções como thead, tbody e tfoot, onde as linhas são contadas separadamente.

Contando Linhas em thead

const theadRowCount = document.querySelector('#minhaTabela thead').rows.length;
console.log(theadRowCount); // Contando as linhas do cabeçalho da tabela

Contando Linhas em tbody

const tbodyRowCount = document.querySelector('#minhaTabela tbody').rows.length;
console.log(tbodyRowCount); // Contando as linhas do conteúdo principal

Contando Linhas em tfoot

const tfootRowCount = document.querySelector('#minhaTabela tfoot').rows.length;
console.log(tfootRowCount); // Contando as linhas do rodapé

Seletores e Melhores Práticas

Para melhorar a eficiência e a clareza do código, aplique melhores práticas, como declarar variáveis imutáveis com const e selecionar o seletor mais adequado.

const tabelaElementoPorId = document.getElementById('minhaTabela');
const tabelaElementoPorClasse = document.getElementsByClassName('minhaClasseTabela')[0];
const tabelaElementoPorTag = document.getElementsByTagName('table')[0];

const rowCountById = tabelaElementoPorId.rows.length;
const rowCountByClass = tabelaElementoPorClasse.rows.length;
const rowCountByTag = tabelaElementoPorTag.rows.length;

Visualização

Suponha que temos uma tabela HTML com a seguinte distribuição de assentos:

Assentos: [🧍, 🧍, 🧍, vazio, 🧍]

Como contamos o número de assentos ocupados?

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

E obtemos o resultado:

Assentos ocupados: 4️⃣
// Quem não tem ingresso?

Assim, aprendemos o número de assentos ocupados na tabela usando JavaScript.

Navegando em Tabelas Dinâmicas

Em tabelas dinâmicas, as linhas podem aparecer ou desaparecer, então é importante monitorar essas mudanças e atualizar a contagem de linhas conforme necessário.

Usando um Mutation Observer

const tabela = document.getElementById('minhaTabela');

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'childList') {
      console.log('Número de linhas:', tabela.rows.length);
    }
  });
});

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

Usando um Event Listener

const tabela = document.getElementById('minhaTabela'); 

tabela.addEventListener('DOMSubtreeModified', function() {
  console.log('Número de linhas:', tabela.rows.length);
});

Usando Bibliotecas

Para facilitar o uso, você pode contar com a biblioteca jQuery para selecionar elementos e contar linhas.

jQuery

let rowCount = $('#minhaTabela tr').length;
console.log(rowCount); // Contagem de linhas com jQuery

Evitando Armadilhas Potenciais

Apesar da aparente simplicidade da tarefa, é importante estar atento a algumas nuances:

• Evite contagens incorretas ao lidar com tabelas aninhadas que podem distorcer a contagem.
• Atualize a contagem de linhas após modificar os dados.
• Selecione com precisão o elemento necessário por ID, classe ou tag.

Recursos Úteis

1. MDN Web Docs - Elemento HTML Table — Informações básicas sobre o elemento <table> em HTML.
2. Documentação da API jQuery - .length — Documentação para a propriedade .length na biblioteca jQuery.
3. CSS-Tricks - Guia Completo para o Elemento Table — Um guia abrangente sobre como usar e estilizar tabelas.
4. GitHub Gist - Exemplo Simples de Código para Contar Linhas em uma Tabela Usando JavaScript — Código de exemplo para contar linhas em uma tabela usando JavaScript.
5. Stack Overflow - Contar o Número de Linhas em uma Tabela Usando JavaScript — Várias maneiras de contar linhas em um recurso popular de programação.

Video

Navigation