jQuery Get All First Cells Of Table - javascript

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

Related

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;

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/

jquery how to show-hide table column

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

determine if row is in thead or not jquery

I'm sure this is simple with .parent() or such but can't find an answer anywhere. I run a function on TR click and I want to determine if that row is in the THEAD or not.
My code:
$('.mouseRow tr').click(function() {
// is this row is in THEAD?
});
Sure, you can check the parent, why not?
if ($(this).parent("thead").length)
Alternatively you couldl've added your event to the row in the head only
$('.mouseRow thead tr').click(function() {...});
$('.mouseRow tr').click(function() {
if ($(this).parent().is('thead')){
// …
}
});
alright so I kind of figured it out, but I wonder if this is the best way to do it:
if($(this).parent().is("thead"))

jQuery: select the first five rows of a table

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

Categories

Resources