JQuery get count of rows

Question

Very Quick points. I have seen very similar questions here on SO but they usually use the table ID or assume there is only one table. I have a page with many tables using the same template (no unique ID) and would like to know if when a particular data is loaded, if the rows are empty. I have tried :

jQuery: count number of rows in a table

Jquery- Get the value of first td in table and many others

  //var row = $(this).closest('table tbody:tr:first');
                // var row = $(this).closest('tr').children('td:first').text();
                // var row = $(this).closest('tr').length;
                // var row = $(this).closest('tr').children('td:first').length;
                // var row = $(this).closest('table').find("tbody").children().length;
                // var row = $(this).closest('table').children('tr:last').index() + 1;
                // var row = $(this).closest('table').rowIndex;
                // var row = $("tbody").has("tr");
                // var row = $(this).closest('tbody').has("tr");
                var row = $('#tbody').children('tr:first').length;

But cannot get the right answer.

Below is the table structure:

Answer 1

To get number of rows, use length or size()

//$(this) assumed as element inside table.
$(this).closest('table').find('tr').length

As you mentioned that you've many tables in a page. you need to let jQuery identify the table index from where you want to get tr length.

To get the specific table, use eq()

//To get TR length in 2nd table of a page
$('table:eq(1) tr').length

FYI,

• For class selector, use $('.table:eq(1) tr').length
• Use $(document).ready(function(){} to wrap your code, that will work when your page gets ready.

Answer 2

Looking at your table structure, you can use

$(".dataTable tr").length

to get the count of rows in table

$("table").each(function(){
console.log($(this).find("tr").length));
})

This will log the count of trs in all tables that you have in your page

If you want to run some code when data gets loaded into any table you got to use Mutation Observer

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

//create observer
var observer = new MutationObserver(function(mutations, observer) {

     console.log("Table Loaded");
     //whatever you want to do when table is loaded
});

//set to observe childs ( options )
observer.observe(document.querySelector("table"), {
  subtree: true,
  childList:true,
  attributes:true
});

Answer 3

I went through people's suggestions which mostly assumed (like the other pages) that there was an ID and that there was a single table on the page although the question mentioned it wasn't so.

Ended up using: var row = table_values.context.tBodies["0"].firstElementChild;

I got this by inspecting the tbody via dev tools.