jQuery click event on td row not firing - javascript

I have a simple bit of jQuery which displays the row below the current one if selected.
What I want if for all the <td> elements but one to fire this method.
Works on whole <tr> row
$(document).ready(function(){
$("#report > tbody > tr.odd").click(function(){
$(this).next("#report tr").fadeToggle(600);
});
});
want to do something like (doesn't work)
$(document).ready(function(){
$("#report > tbody > tr.odd > td.selected").click(function(){
$(this).next("#report tr").fadeToggle(600);
});
});

You need something like this:
$(document).ready(function(){
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$("#report > tbody > tr.odd > td.selected").click(function(){
$(this).closest("tr").next("tr").fadeToggle(600);
});
});
Since you're clicking a td, need to go up to the row before trying to get the next row. Also this selector should work the same in most cases: #report td.selected. Since you can't escape being inside the #report with a sibling, #report tr can also be just tr in your next().

In your non-working code, $(this) is a <td> element.
Therefore, $(this).next("#report tr") doesn't match anything. (Because the <td> element has no <tr> elements as siblings)
You need to change it to $(this).closest('tr').next("#report tr") to find the "uncle" element. You could also call .parent() instead of .closest('tr'), but calling .closest will keep working even if you bind the click handler to a child of the <td>.

Related

How to exclude the first td when selecting a tr? CSS, JQuery

I have this script that changes background-color for a table's tr when clicked:
<script>
$('#reviews').on('click', 'tbody tr', function(event) {
$(this).addClass('highlight').siblings().removeClass('highlight');
})
</script>
It works fine. However, I'd like to exclude the first td of the tr. So, when the user clicks on the first td nothing happens. How to exclude it?
Tried this:
<script>
$('#reviews').on('click', 'tbody tr:not(:first-of-type)', function(event) {
$(this).addClass('highlight').siblings().removeClass('highlight');
})
</script>
But it still highlight the entire row when clicking on the first td.
You exclude the first tr not td of each line. If I understand your goals correctly, it should looks something like this:
$('#reviews').on('click', 'tbody tr td:not( :first-of-type )', function(event) {
$(this).parent().addClass('highlight').siblings().removeClass('highlight');
})
Demo link
You're trying to exclude first tr, but mentioned you wanted first td excluded.
try like this
$('#reviews').on('click', 'tbody > tr', function(event) {
$(this).parent().find('td:not(:first-of-type)').addClass('highlight');
$('table#reviews tr > td:not(:first-of-type).highlight').removeClass('highlight');
})

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

jquery each() doesn't loop through newly added table rows

I have a very simple table
<table>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
</table>
when i append another row to the above table with text 5 in td jquery each() doesn't loop through newly added row it returns only predefined elements not the elements dynamically added
$("table > tbody").append("<td>5</td>");
$("table tr td").each(function(){
alert($(this).text());
});
Please see JS FIDDLE LINK HERE
In tbody you cannot append td directly wrap them in tr.
Live Demo
$("table > tbody").append("<tr><td>5</td></tr>");
$("table tr td").each(function(){
alert($(this).text());
});
Your reasoning is incorrect. The reason it doesn't find the element is because your selector doesn't match the nesting of elements that you're appending.
Wrap the td elements in a tr element.
You need to do this:
$("table > tbody").append("<tr><td>5</td></tr>");
$("table tr td").each(function(){
alert($(this).text());
});
The reason is simple you, your original code will produce the new row as <tbody><td>5</td></tbody> without the tr tag that you were looking for in the each function.

Finding the first div inside a td

I'm pointing at the first div inside my table's td as you can see in the jQuery code below.
$('table tr td div').css("position", "relative");
But I've got some problems with that so I've tried this:
$('table tr td').parents('div:first').css({position:'relative'});
But this one doesn't work fine either. What is wrong with my code?
My HTML structure is:
<table>
<tr>
<td><!-- all id for the div and image inside the td are dynamic -->
<div><!-- Need to access this div -->
<!-- content --->
</div>
</td>
</tr>
</table>
.parents() find all parent of your selection. what you want is a child.
$('table tr td div:first').css("position", "relative");
This will do the trick for you :)
You also might want to select only exact descendants, in that case you can use:
$('table tr td > div:first').css("position", "relative");
You could use below 2 methods if you want to find the occurrence of the first DIV from TD with the class'vx1'
$( "table tr td.vx1 > div:first" ).css( "width", "50" );
You could use below 2 methods if you want to find the occurrence of the first DIV from TH with the class'vx1'
$( "table tr th.vx1 > div:first" ).css( "width", "50" );

getting table row of $this parent siblings table !

i have a href link under my table and i want to be able to manipulate table rows by clicking on that link but i cant get them !
here is my html
<div>
<div> <a href="#remove" class="removelink" > remove </a> </div>
<table>
<tr> <td></td> </tr>
</table>
</div>
i want to do something like:
$('.removelink').click(function(){
$(this).parent().siblings('table tr:last').remove();
})
i can get to the table by
$(this).parent().siblings('table')
but i cant get rows by something like
$(this).parent().siblings('table tr')
You can use find to get to the tr from the table:
$('.removelink').click(function(){
$(this).parent().siblings('table').find('tr:last').remove();
});
Here's a working example. If your HTML structure is always exactly as you've shown, you could use next() instead of siblings('table') for slightly shorter code.
The problem with your current code is that siblings('table tr') will look for a sibling of the div which is a tr, and there are none!
.siblings(selector) will return all siblings of a certain element which match the selector.
.siblings('table tr') will only return something if the context element has tr elements as siblings but the div does not.
Just use .find:
$(this).parent().siblings('table').find('tr').last()
var $context = $(this).parent().siblings('table');
$("tr:last", $context);

Categories