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:

Looks like you should have a look at the [jQuery Learning Center](https://learn.jquery.com/) — Andreas, Oct 17 '16 at 10:10
var rowCount = $('#table tr').length; gives you number of rows in a table — Raki, Oct 17 '16 at 10:11
@Raki you're restricting the value of `rowCount` to the table with id `table` , i think that's no what he is asking. — Lahiru Ashan, Oct 17 '16 at 10:15
what you mean by " would like to know if when a particular data is loaded"? is the data in all table getting loaded on page load or using an ajax call? — ALOK, Oct 17 '16 at 10:26

Mohit Tanwani · Answer 1 · 2016-10-17T10:23:18.940

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.

edited Oct 17 '16 at 10:23

answered Oct 17 '16 at 10:12

Mohit Tanwani

6,608
2
14
32

This answer is very nearly what I am looking for. However, since its a big project there may be new tables added and then the code would break as the table number is hardcoded. – Afshin Ghazi Oct 17 '16 at 10:22
@AfshinGhazi I've just suggested you a way as your question was not so much clear, but you can specifically use as per your need, When you want to get the length of particular table you might need to use `eq()` – Mohit Tanwani Oct 17 '16 at 10:25
Good practice is provide an specific ID to particular element, will you be able to do that ? – Mohit Tanwani Oct 17 '16 at 10:42
Sure I will change the business logic so you can answer my question. – Afshin Ghazi Oct 17 '16 at 10:45

score 0 · Answer 2 · answered Oct 17 '16 at 10:17

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
});

score 0 · Answer 3 · answered Oct 17 '16 at 11:25

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.

JQuery get count of rows

3 Answers3