how to get number of children in html table using jquery - javascript

I am not able to understand the behavior of jquery method children. I am able to count the number of <p> in a <div> using :
var abc = $("div").children("p");
alert(abc.length);
But the same thing when applied to <tr> within <table> results in 0 (zero) count.
var abc = $("table").children("tr");
alert(abc.length);
why is it so?

Try this
$("table tr").length;
If you only want to get tr within tbody
$("table tbody tr").length;

children() will return direct children (traverses single level) of <table> but not the grand-child(ie, children's children).
If you wish to search in descendants of an element, use find().
Here is how then you can get the <tr> of <table>:
var trs = $('table').find('tr');
And, to get the count/length
alert($('table').find('tr').length);
No nested table
If there is no nested tables, then
alert($('table').find('tr').length);
or
alert($('table tr').length);
will give you a proper result.
Nested tables
If you are having some nested tables i.e <table> inside a <table>,
Above code won't give you correct result, if you need <tr>s of parent <table>, but not of children <table>.
Here is how then you can get it:
alert($('table>tbody>tr').length);
or
alert($('table').children('tbody').children('tr').length);
Hope it helps.

Here is your answer.
alert($("table tr").length);

Use selector that will select all the rows and take length.
var tableRowCount = $('table tr').length;
This approach also used for get counts all trs of every nested table

Use this
var childrensCount = $('table tr').length;
OR
var childrensCount = $('#tableId tr').length;

Related

Get children without subchildren

In HTML I have tables in tables.
So I have for example a table in a td element.
However when getting all td's for the closest row :
var row = $(this).closest('tr').find('td');
I am getting all the subchildren also (all td elements in the child table).
How you get all childs without sub elements ?
Thanks in advance
Did you try $(this).closest('tr').find('>td');
The > only select direct descendants (first level children)
You can use children():
var row = $(this).closest('tr').children('td');
Or alternatively include the direct descendant selector when using find():
var row = $(this).closest('tr').find('> td');

How to get all master table rows in nested html table

I have a table like below
I want to get all rows from master table but I got all rows both master and child/nested table. My code is given below----
var $rows = $('#tableID tr:has(td)');
Please help me in this point...
You may try something like this:
var tr = $('#tableID tr').not('table table tr').not('tr:has(table)');
Should be $('#tableID>tr:has(td)'); This will select the direct descendants, whereas you were selecting all descendants.

jQuery - Get table row count with a certain class

I know I can get the number of rows in an HTML table with the following jQuery:
var rows= $('#myTable tbody tr').length;
However, how can I get the number of rows that have a given class (e.g., <tr class="MyClass>). How can I count the number of rows in a table with a class of "MyClass"?
Simply add the class to the selector
var rows= $('#myTable tbody tr.MyClass').length;
No need to overqualify so this would work too
var rows= $('#myTable tbody .MyClass').length;
As Adam said use .class-name selector.
For further examples see other jquery selectors
Just change your jQuery to check for instances of the class.
var rows = $('.MyClass').length;
Here's a jsfiddle example: http://jsfiddle.net/Ma7pz/

Getting total length of an index in each()

I want to get an unknown (changing) # of rows from a table, between the 1st cell and the last 3. I'm using jQuery's each and don't know why $(this).length doesn't give the total length of the index.
jQuery:
$("#parent table:first tr").each(function(i){
var goodlng = $(this).parent().children("tr").length -1; //this works
var badlng = $(this).length -1; //this doesn't! (always == -1)
});
Is the goodlng good practice? it seems like a hack to have to go to parent and then back to children.
Here is a jsfiddle (have console.log()) open.
Example HTML:
<div id="parent">
<table>
<tr>
<td>unwanted 1</td>
</tr>
<tr>
<td>wanted!</td>
</tr>
<tr>
<td>unwanted2</td>
</tr>
</table>
</div>
tl;dr: Why doesn't $(this).length == $(this).parent().children("tr").length inside of an each function. and is there another better way of doing this.
Your question says "cells", but it seems like you're trying to get the number of rows.
If you really want it inside the .each(), you could use the siblings()[docs] method and the andSelf()[docs] method.
$(this).siblings().andSelf().length
But if the rows aren't changing, why do it repetitively?
Or if they are changing, I'd just use the native rows property on the table to get the length.
var table = $("#parent table:first");
table.find('tr').each(function() {
var len = table[0].rows.length;
});
Actually, this $(this).parent().children("tr").length is the correct way of handling things. this, in the context above is a reference to the tr node itself. tr.length = the length of the tr. tr.parent().children("tr"), on the other hand is a list of the node's siblings, so tr.parent().children("tr").length is the number of siblings.
This is the context of EACH element, not all of them. Therefore, this is only ONE tr at a time. That is why the length does not have all the elements.
The each() function is unaware of the collection of elements that it is working on. It is dealing with a single element at all times. Thats why when you go to the parent and ask for all children you get the right answer.
$(this)
simply refers to the current tr element that you are dealing with, not a collection of them.

JQuery find not working for tr element?

Just wondering if anyone knows why the following code doesn't work (each() is not executed at all)...it works if i try td elements but not tr elements for some reason?
The html is returned by a php script and looks like
<tr class="my_files_row"><td>bla</td><td>bla</td></tr>
function update(html)
{
$(html).find('tr').each(function()
{
alert('success');
})
}
Thanks in advance!
I think your php should return the tr inside other element (a table perhaps). As the JQuery documentation states, find searches on "descendants" of the element, and tr is not a descendant of tr in your html. You can change the response to:
<table> <tr class="my_files_row"><td>bla</td><td>bla</td></tr> </table>
and that should work.
Find only finds descendants. In your case, tr is the root.
If you're interested in all TR elements and not those of a particular table/tbody/thead/tfoot element, then ask the right question (and don't be more complicated than you need to be). This:
$('tr').each(function(){
var tr = $(this) ;
...
}) ;
should do you. If you need to be more specific table, you just to refine your selector:
$('table#mySpecialTable tbody tr')
The above gives you all elements in the of the table with id mySpecialTable.

Categories

Resources