Javascript to get row count of a HTML table

Working with table sections

If your HTML table has sections (thead, tbody, and tfoot), you might need to count rows within each section separately. Let's check how.

Counting rows in thead

const theadRowCount = document.querySelector('#myTable thead').rows.length;
console.log(theadRowCount); // how many kids at the head of the table?


Counting rows in tbody

const tbodyRowCount = document.querySelector('#myTable tbody').rows.length;
console.log(tbodyRowCount); // main course served in tbody, count the eaters


Counting rows in tfoot

const tfootRowCount = document.querySelector('#myTable tfoot').rows.length;
console.log(tfootRowCount); // counting the foot soldiers


Selectors and best practices

Adopt best practices for clear, concise code. Use const for immutable variables, and choose the best selector for your case.

const tableElementById = document.getElementById('myTable'); // tagging the table
const tableElementByClass = document.getElementsByClassName('myTableClass')[0]; // class act
const tableElementByTag = document.getElementsByTagName('table')[0]; // tagging (again!)

const rowCountById = tableElementById.rows.length; // counting sheep by id
const rowCountByClass = tableElementByClass.rows.length; // counting sheep by class
const rowCountByTag = tableElementByTag.rows.length; // countAllTheSheep();


Navigating dynamic tables

If your table is dynamic (rows are added or removed), you need to capture these changes and update the row count. Let's play a game of hide and seek with our rows!

Using a Mutation Observer

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

const observer = new MutationObserver((mutations) => { // Briefing the secret agent
  mutations.forEach((mutation) => {
    if (mutation.type === 'childList') {
      console.log('Row count:', table.rows.length); // Reporting from the field
    }
  });
});

observer.observe(table, { childList: true, subtree: true }); // Agent on duty


Using an Event Listener

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

table.addEventListener('DOMSubtreeModified', function() { // Waiting for the signal
  console.log('Row count:', table.rows.length); // Aye Aye, Captain! Reporting new row count
});


Tapping into libraries

For a more simplified and advanced approach, use the jQuery library to select and count your table rows, like counting ducks in a pond!

jQuery

let rowCount = $('#myTable tr').length; // Ducks in sight
console.log(rowCount); // Quack quack! We have rowCount ducks


Look out for potential pitfalls

While counting rows is quite straightforward, here are some traps to watch out for:

• Beware of nested tables. They can create a mirage of more rows.
• Refresh your count after modifying the table. Old counts would lead you astray.
• Ensure correct element selection (proper use of ID, class, or tag). Select wisely to avoid bloated row counts.