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.
Related
JsFiddle
I am trying to delete Default from each of the node. I tried following code
$( document ).ready(function() {
$( "table tbody tr td:nth-of-type(1) select option").first().remove();
});
It deleted the element from from the first node. Can someone help me to delete first element from each node.
$("table tbody tr td:nth-of-type(1) select option:first-child").remove();
Demo: http://jsfiddle.net/rqtaz/6/
.first() returns the first element in the set.
You want to use the :first-child selector, which will filter the simple selector you apply it to to only match the first child of the parent:
$("table tbody tr td:first-child select option:first-child")
This will only match <option> elements that are the first child of their respective parents.
You can also use it on the td.
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
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.
:)
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).
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>.