We Keep Coding

How to modify to every cell in last column in table using Jquery

I'm trying to modify every cell in last column in html table.
My first try is:
$('#example td:last').each(function(elem) {
//do something with elem
});
But above code modify only last cell in last column (so one cell instead of all cells in column).
How should I change selector to much all td in last column?

Try :last-child instead of :last.

You can do:
$('#example tr').each(function() {
var elem = $(this).find('td:last');
//do something with elem
});
Fiddle Demo

:last return a single element, the last element of the jQuery stack. It is exactly the same of doing :
var $td = $('#example td');
$td.eq($td.length - 1);
What you want is the CSS selector :last-child, which return the last child (huh).
$('#example td:last-child').each(...);

Jquery- Deleting first element from each node

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.

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/

jQuery click event on td row not firing

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