Develop Reference

how to get number of children in html table using jquery

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;

How to get first td text from a tr by jquery

I want to get a text of cell in a tr row.
The tr row has class attr and a data- attr.
I select the tr row as
var k = $('tr[class="BatchTypesRow"][data-rowselected="true"]');
then
var m = k.children("td:first");
var sBtype = m.text();
alert(sBtype);
the sBtype contains all cells' text in the row.
I tried
var sBtype = m[0].text();
that catches an exception.
So what is the problem here?
If the cell is not the first cell in the row, how to do it?

Here, m itself is the first td of the row since var m = k.children("td:first");
So m.text() would not give the whole row as long as td:first is selected. If you use .children("td") then you would be getting the whole row in m.text(). So in your code,
var sBtype = m.text();
alert(sBtype);
would actually give the First cell content.
If not the first cell, you would be using var m = k.children("td"); removing the keyword first. In this case m[0] would have the first cell, m[1] second and so on.
Correct me if am wrong, I believe this is how you got the exception, using m[0].text() would throw you an exception since m[0],m[1] are not JQuery object. They are HTMLTableCellElement Object.
To use it as a JQuery object, you would have to use $(m[1]).text().
And if you know which element to be selected w.r.t its sequence, you can use
var m = k.children("td:nth-child(n)");
where you can replace n with the number so that you will select the nth td of the row.
Hope this helps.

$('tr.selected td:first-child').text();

Firstly, select the tr within which lies the text.for which you can use the class attr
$("tr.BatchTypesRow")
then traverse down the tree to get the td ie its children
$("tr.BatchTypesRow").children("td")
as you need the first child ,is the first td as you traverse through the selected tr ,it can be further written as
$("tr.BatchTypesRow").children("td:first")
if the text lies within a label inside the selected td
$("tr.BatchTypesRow").children("td:first").children("label").text();
will give you the desired text .

CSS selector combine with And operation '&&'

I am trying to use querySelectorAll() to get each 'td' element that have align attribute && is child of 'tr'
this works :
document.querySelectorAll('tr>td');
and this works :
document.querySelectorAll('[align]');
but how to combine them ?

Preface: There's no point whatsoever to tr> in front of td: The only valid parent element for a td is a tr. So I've left that off below.
That depends on what you want to do.
If you only want td elements with an align attribute:
document.querySelectorAll("td[align]")
Or only td elements that are children of tr elements that have an align attribute
document.querySelectorAll("tr[align]>td")
Or only elements with an align attribute that are children of td elements:
document.querySelectorAll("td[align]")
Or only elements with an align attribute that are descendants (not necessarily direct children) of td elements:
document.querySelectorAll("td [align]")
...and so on; full details in the spec.
Re your comment below:
It works, but is there a way to not select the first td from each tr ?
There's nothing about that in your question.
You could use td:not(:nth-child(0)) which means "a td that is not the first child of its parent" provided that you never have a script element as the first child of a tr (which is valid, but an odd thing to do). With that proviso, it works, because only td and script are valid children for tr.
Or you could just punt and select all the relevant tds and then:
var list = Array.prototype.slice.call(document.querySelector("whatever"), 1);
...which will give you an array skipping the first entry in the list returned by querySelectorAll.
Re your further comment:
tr[style]>td[align]:not(:nth-child(0)) returned 550 node lists which is the same as tr[style]>td[align]
Right. Again, :nth-child looks to see what child it is, not where it falls in the list chosen by the previous selector.
If you want to skip the first td in each row, and you want to ignore tr that don't have a style attribute, it's more complicated:
var result = Array.prototype.reduce.call(
document.querySelectorAll("tr[style]"),
function(list, row) {
list.push.call(
list,
Array.prototype.slice.call(row.querySelectorAll("tr[align]"), 1)
);
return list;
},
[]
);

You can combine selectors the same way as in CSS, like:
document.querySelectorAll('tr>td[align]');
If you haven't nested tables, it's the as document.querySelectorAll('td[align]');.

Combine them like this:
document.querySelectorAll('tr>td[align]');
More info: CSS Attribute Selectors
Note: <td> is only permitted as a child of <tr> anyway.

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.

I have a working Javascript code to add new html rows. How to delete one?

this following code works in adding new rows in HTMl:
function addRow()
{
var row = document.getElementById('row');
var newRow = row.cloneNode(true);
row.parentNode.insertBefore(newRow, document.getElementById('submit_row'));
}
How can I add a new function to remove a row? I tried searching but couldn't find the answer.

To remove a DOM element in Javascript you use the removeChild API. This requires you to have the DOM element of both the container and the item you want to remove.
In this example if you wanted to remove the row with id row you would do the following
var row = document.getElementById('row');
row.parentNode.removeChild(row);
Documentation: https://developer.mozilla.org/En/DOM/Node.removeChild
Note: In this particular example it looks like you are adding multiple DOM nodes with the same id value. Having duplicate id values is not allowed and will cause you many problems down the road. Every id value needs to be unique.
One way to accomplish this would be to use a counter to append a unique suffix to every row you add.
var rowCounter = 0;
function addRow()
{
rowCounter++;
var row = document.getElementById('row');
var newRow = row.cloneNode(true);
newRow.id = 'new_row_' + rowCounter;
row.parentNode.insertBefore(newRow, document.getElementById('submit_row'));
}

You are looking for the removeChild() function.

I think there is a problem with your addRow() function. You are cloning a node and then keeping the same ID of 'row'.
function addRow()
{
var row = document.getElementById('row');
var newRow = row.cloneNode(true);
// set newRow.id to something other than 'row'
row.parentNode.insertBefore(newRow, document.getElementById('submit_row'));
}
To remove a node, you can use removeChild(), to remove a child node from an element
For example, x.removeChild(y) would remove child y of node x.

If you already have the targeted row, you'd do this...
row.parentNode.deleteRow(row.rowIndex);
https://developer.mozilla.org/en/DOM/table.deleteRow
The docs are for table, but tbody elements have the same method.

If you return the rows from the function before appending them to the DOM, you can record them in an object or array. Then you can easily remove them with removeChild (previously mentioned) without searching the document again.