Develop Reference

table row toggle by clicking td

Please check the fiddle link
http://jsfiddle.net/mv7Y5/89/
am trying to achieve to toggle the table row by clicking the td,
which is not happening please help needed.
$(function() {
$(".details").hide();
$('.show-details').click(function(e) {
$(this).next("tr").slideToggle(500);
});
});

You are calling next() on the td that gets clicked (on the first cell, anyway). What next() does is it finds the nearest sibling of the element in question that matches the selector. There is no tr that is a sibling of the td that gets clicked. You need to make sure that you're calling next() on the tr, so it can find the next tr:
$(function() {
$(".details").hide();
$('td.show-details').click(function(e) {
$(this).parent().next("tr").slideToggle(500);
});
});
Additionally, your markup in that jsfiddle is a little screwy (you've got an inconsistent number of columns in your rows, for example, which I believe may be the result of some typos.)

In your first row, you have the class name "show-details" on the "td". On the subsequent rows, the class name is on the "tr" elements. Since you are using ".next()" to find a "tr", the class should be on the "tr" as in the second, third and forth rows.

<tr class='rowToClick'><td>click me</td></tr>
Next, this should work:
$(document).ready(function()
{
$(".rowToClick").click(function() { $(this).nextUntil(".rowToClick").toggle(); });
});

jQuery Get All First Cells Of Table

I need to get all tds (cells) of all the rows in a certain table , is there an elegant way to do this or do I need to loop over the collection myself somehow?

try first-child
$('table tr td:first-child')
or
$("table tr td:first")
or
$("table tr td").first()

This code will return all tds inside your table with id=tableId
$('#tableId td')

Your question title is different from your question body. You may be interested in this solution, although I can't be sure:
$('#table_id tr td:first-child')

You have to loop it
Try this
$('#mytable tr').each(function() {
var customerId = $(this).find("td:first").html();
});

JQuery find not working for tr element?

Just wondering if anyone knows why the following code doesn't work (each() is not executed at all)...it works if i try td elements but not tr elements for some reason?
The html is returned by a php script and looks like
<tr class="my_files_row"><td>bla</td><td>bla</td></tr>
function update(html)
{
$(html).find('tr').each(function()
{
alert('success');
})
}
Thanks in advance!

I think your php should return the tr inside other element (a table perhaps). As the JQuery documentation states, find searches on "descendants" of the element, and tr is not a descendant of tr in your html. You can change the response to:
<table> <tr class="my_files_row"><td>bla</td><td>bla</td></tr> </table>
and that should work.

Find only finds descendants. In your case, tr is the root.

If you're interested in all TR elements and not those of a particular table/tbody/thead/tfoot element, then ask the right question (and don't be more complicated than you need to be). This:
$('tr').each(function(){
var tr = $(this) ;
...
}) ;
should do you. If you need to be more specific table, you just to refine your selector:
$('table#mySpecialTable tbody tr')
The above gives you all elements in the of the table with id mySpecialTable.

Using `Not` with `Delegate` - Jquery

I currently have something like this:
$(".jtable tbody td").not(".DeleteLicense").hover(
How can I use delegate with this? Something like
$("#resultContainer,#approvalContainer,#createNewContainer").delegate(".jtable tbody td....
Thanks!

You can use the :not() selector to move the negation in to your selector.
$("#resultContainer,#approvalContainer,#createNewContainer")
.delegate(".jtable tbody td:not(.DeleteLicense)", "...", ...);
Note that the jQuery documentation recommends using the .not() function rather than the :not() selector in most cases, but I'm not sure if it is possible in this case.
If you're willing to use another approach, you may find that you could use the .jtable tbody td selector in your call to delegate, and then use if(!$(this).is(".DeleteLicense")) { ... } in your event handler to only process elements that meet your criteria.

Like this:
$("#resultContainer,#approvalContainer,#createNewContainer").delegate(".jtable tbody td:not('.DeleteLicense')", "hover", function(eventObj) {
// handler code
});

My first thought would be to try and use the :not() selector:
$("#resultContainer,#approvalContainer,#createNewContainer").delegate(".jtable tbody td:not('.DeleteLicense')", "hover", function(){ /* do stuff */});

How to hook onclick event for each cell in a table in Javascript?

I was thinking if there's a better solution for adding onclick handler to each cell in a table than this approach: Adding an onclick event to a table row
Better in the way that I wouldn't need to set "cell.onclick = function" for each cell.
I just need to get the coordinations of a cell where user clicked.
Thanks!
EDIT: The "coordinations" mean 0x0 for top-left cell, 0x1 for second cell in the first row etc.

Are you looking for this?
$(function(){
$("#tableId tr td").click(function(event) {
alert(event.pageX);
alert(event.pageY);
});
});
In case your table cells are generated dynamically:
$(function(){
$("#tableId tr td").live('click', function(event) {
alert(event.pageX);
alert(event.pageY);
});
});
.
Update Based On OP Comment:
To get top and left values you could try this:
$(function(){
$("#tableId tr td").click(function(event) {
alert($(this).offset().top);
alert($(this).offset().left);
});
});
As your other comment shows, you are probably looking to get the IDs of the clicked cell, you may try this:
$(function(){
$("#tableId tr td").click(function(event) {
alert($(this).attr('id'));
});
});
But for the above to work, it is assumed that all cells already have an id attribute.

You're looking for event delegation.
http://icant.co.uk/sandbox/eventdelegation/
among other examples. Basically observe some higher container such as the table for click events and then determine if you care to handle it by inspecting the event passed to the event handler.
So if the click happens inside the table, you can determine the target of the event and assuming there's a valid td present handle the event.
This has the benefit of allowing you to dynamically add more table cells without needing to add handlers to all of them.
jQuery in particular as an excellent delegate method for using this approach.
http://api.jquery.com/delegate/