how to select n-th td of a tr using jquery - javascript

How can I select nth < td > of a < tr > using jquery. Say, I want to select 3rd < td >. I have id for every tr. How can we achieve this ?

using :nth-child() Selector
like
$("tr td:nth-child(2)")

the eq api should do this for you
$("table td").eq(n)

$('#id td:nth-child(3)');
Like so for the 3rd.

Related

why i can't get all first td in one selector in jquery?

why i have to do :
$('.inout tbody').find('tr:first td:first')
//return => Object[td, td, td, td]
instead of
$('.inout tbody tr:first td:first')
//return => Object[td]
why does't have the same result? it's the pseudo element ":first" the problem?
EDIT AWNSER:
The truth response is: :first != :first-child ;)
$('.inout tbody tr:first-child td:first-child')// works !
:first return the first element on the stack. I guess you are looking for every first-child.
Try this :
$('.inout tbody tr:first-child td:first-child')
For reference:
:first-child Selector
While :first matches only a single element, the :first-child selector can match more than one: one for each parent. This is equivalent to :nth-child(1).
You're asking for different things:
$('.inout tbody').find('tr:first td:first')
Is asking for the first td of the first tr for each element in $('.inout tbody').
$('.inout tbody tr:first td:first')
Whereas this is asking for the first td of the first tr out of all of them.
The following selector will return an array of first tds:
$('.inout tbody tr:first-child td:first-child');
This jsFiddle may be useful for verifying this
because your second selector will select :
.inout > tbody > tr:first > td:first'
You should change it to:
$('.inout tbody tr:first , .inout tbody td:first')

How do I use the nth-child selector with jquery's child selector?

This works fine:
$("#element").find("> tr > td > i > a")
But I'm trying to use the nth-child selector to say that I want a specific numbered child. For example, I want:
$("#element").find("> tr > td > i > a:nth-child(3)")
I'm not getting any results. Does anyone have any ideas on how I could select all the nth numbered children? Thanks in advance!
Firstly, this unless there's a great need to do direct descendant (the >) selectors, I don't see the need of including them, you can appropriately shorten your CSS selector too:
//Select 3rd <a> tag, within the context of #element td
$('a:nth-child(3)', '#element td');
//or
$('#element td a:nth-child(3)')
Fiddle: http://jsfiddle.net/KGWuK/
Although, currently your selector provided with the question will only work if your HTML structure is:
<td>
<i>
<a>One</a>
<a>Two</a>
<a>Three</a>
</i>
</td>
Which isn't a very advisable style of markup. That's because the original selector is selecting <a> tags of those that a direct child of the <i>
I would recommend not using find as its not needed:
$("#element > tr > td > i > a:nth-child(3)")
This will find the tag located within the tag located within the table cell within a table row located within the element.
JSFiddle
Seeing that you have only 1 a with no sibling, i guess you are for the fourth element of your stack.
There is a jQuery method for that : .eq() :
$("#element").find("> tr > td > i > a:eq(3)");
or faster :
$("#element").find("> tr > td > i > a").eq(3);

get the first tr that contains tds

In jquery how do I get the first table row that contains <td>s
So far my code looks like this but its not working?
$('#mytable tr').has('td:first').html();
thanks
You could find the first td's parent.
$("#mytable td:first").parent().html();
You could try
$($("#mytable").find('tr')[0]).find('td')
In this case you can iterate through rows and fetch the tds
$($($("#mytable").find('tr')[0]).find('td')[0]).text()
$($($("#mytable").find('tr')[0]).find('td')[1]).text()
Try to use this:
$("#mytable td:first ").parents('tr').html();
Try this, jQuery maintains the element indices while selecting them -
$('#mytable td').eq(0).parent();
So in effect, this will select the first td in your table and return the parent, which should be a tr element, by convention

hide tr that has th and colspan

I'm trying to alter the background of "table tr" if it has a "colpan" and if it contains "th" but this below wont work.
$("#mytable tr").contains('th').attr('colspan').hide();
Can you help?'
Try:
$('#mytable tr').filter(
function(){
return $(this).has('th[colspan]').length;
}).hide();
JS Fiddle demo.
Edited to add the .length to the filter, since finding an empty array counts as finding something, in jQuery...sigh.
Try this.
$("#mytable th[colspan]").parent().hide()
Try this code:
$('th[colspan]').parents('tr').hide();
here you go sir:
$('#mytable > tbody > tr> th[colspan]').hide();
that will hide the all th which have colspan attribute from mytable.
please don't forget to vote up.
:)

jQuery nested :eq selector

I'm new to jQuery and I'm trying to select cells in an table. My table have, for example 3 cols with 3 cells each.
So I try to select the first cell of the first row, for example, like this:
$("#table tr:eq(0) td:eq(0)")
But doesn't works! What's the right way to do this ?
Are you sure your table has an ID of table? Or should your selector not have the # in it.
If your table does not have an ID of table and you want to select by tagname, the selector of
$("table tr:eq(0) td:eq(0)");
should work. You can also write it in other ways, such as:
$("table tr:first td:first");
I think the issue might be that you've got an erroneous hash in there though ;)
Try adding this to make sure it's not working (or is)
$("#table tr:eq(0) td:eq(0)").css('background','red').otherStuff();
And does your table have the id table? Try:
$("table tr:eq(0) td:eq(0)").css('background','red').otherStuff();
you could try to use this:
$("#table tr:nth-child(0) td:nth-child(0)")
i didnt test it though.
Edit: nth-child is 1-indexed. so it should be nth-child(1).

Categories