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/
Related
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;
I need to get all tds (cells) of all the rows in a certain table , is there an elegant way to do this or do I need to loop over the collection myself somehow?
try first-child
$('table tr td:first-child')
or
$("table tr td:first")
or
$("table tr td").first()
This code will return all tds inside your table with id=tableId
$('#tableId td')
Your question title is different from your question body. You may be interested in this solution, although I can't be sure:
$('#table_id tr td:first-child')
You have to loop it
Try this
$('#mytable tr').each(function() {
var customerId = $(this).find("td:first").html();
});
How can I hide a entire table column with jQuery?
I managed to hide a single td, but not the other 2 tds under it. Code to hide table td:
$("#td_maand").hide();
Give all the same column tds the same class, then $(".columnClass").hide();
e.g.
<tr><td class="firstcolumn"></td><td class="secondcolumn"></td></tr>
<tr><td class="firstcolumn"></td><td class="secondcolumn"></td></tr>
<tr><td class="firstcolumn"></td><td class="secondcolumn"></td></tr>
<script>$(".firstcolumn").hide();</script>
You can use the nth-child selector to achieve that, use it like this:
$('#yourtable tr td:nth-child(3)').hide();
that will hide your third column.
You can do it easily:
var i = [your_column_index];
$('td:nth-child(' + i + ')').hide();
You can use
$(this) // assuming this points to a td
.closest('tbody') // find closest tbody (container)
.find('> tr > td:nth-child('+$(this).index()+')') // find all td in the same column
.hide(); // hide them
Demo at http://jsfiddle.net/jFv6d/
(it hides the clicked column)
try $("#td_maand").parent().hide();
I'm dynamically creating table rows. So each time I add a row, I need to get the ID of the last <tr> so that I can create a new <tr> with ID = "(the last row's ID) + 1". Is there any way to get the last row's ID using jQuery?
$('#yourtableid tr:last').attr('id');
Old question, but here's a different way using JQuery traversal which is a bit quicker:
$("#TableId").find("tr").last();
An alternative method to ID your rows, if they are all sequential is just to get the number of rows + 1.
$("#TableId").find("tr").length + 1
var id = $('table tr:last').attr('id');
2019
As of jQuery 3.4.0 :last is deprecated, use .last() instead, like this:
var id = $('#mytable tr').last().attr('id');
var tid=$('#tableid tr:last').attr('id');
alert(tid);
There are two methods and they both work $('#tableid tr:last') and $('#tableid tr').last()
You don't need to use jQuery for that. You can handle it in CSS counters. The counters automatically increments the index values and it also handles the rearrangement of numbers in case a row is deleted from the midst. The CSS counters can be implemented as follows. Insert it into your CSS file that take care of the styles of the HTML table.
#yourtableid tbody
{
counter-reset: tablerow;
}
#yourtableid tbody .yourHTMLcellclass::before
{
counter-increment: tablerow;
content: counter(tablerow)". ";
}
Last row id of table
var lastid = $('table tr:last').attr('id');
var str = lastid .replace(/[^0-9]+/ig,"");
I was looking for a Vanilla javascript solution and this question is the first Google result, so here is the solution without Jquery :
let table = document.getElementById('myTable') ;
let lastLine = table.rows[table.rows.length-1];
How can I quickly get a jQuery selector for the textboxes in the the first 5 rows of a table? I have a table with many rows and many textboxes; I'm just trying to select the textboxes in the first 5 rows of the table. Is there an easy way to do this?
Use lt()
$('tr:lt(5) input[type=text]')
Note that it's lt(5), not lt(6), since the indexes are 0-based.
try:
$("#yourTable tr:lt(5) input[type=text]")
see "http://docs.jquery.com/Selectors/nthChild#index"
try width:
$("table tbody tr:nth-child(0)").html();
$("table tbody tr:nth-child(1)").html();
$("table tbody tr:nth-child(2)").html();
$("table tbody tr:nth-child(3)").html();
$("table tbody tr:nth-child(4)").html();