We Keep Coding

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.

Remove table rows using jQuery but prevent remove the first row

I am using jQuery to remove table rows - my script works ok but I don't want the button to be able to remove the very first table row. Can anyone suggest how this is done?
$("#remove").click(function(event) {
event.preventDefault();
$("table tr:last").remove();
i++;
});

Try the following:
if ($("table tr").length != 1) {
$("table tr:last").remove();
}

How about
$("tr:last:not(:first)").remove();
You don't need the table selector as all rows are inside tables, but it might be useful to specify the table element from which you want to remove (avoiding side effects if you later would add other tables).
Example: Remove all rows from $table except the first:
$("tr:not(:first)", $table).remove();

You can use gt() and not():
$('table').find('tr:gt(0):last').remove();
This finds all rows with an index greater than 0, gt(0) and selects the last row, :last and then removes that element.
Demo: http://jsfiddle.net/XhtC8/
If you wanted to remove all rows but the first then you can remove :last:
$('table').find('tr:gt(0)').remove();

Try:
$("#remove").click(function(event) {
event.preventDefault();
$("table tr:not(':first')").remove();
i++;
});
Demo here: http://jsfiddle.net/aGukb/

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

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

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

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.