Determining what column/row is clicked by a user

Question

Using JQuery, I need to know if the User clicked on the link or third column, and need to get the value of the variable in the first column. How do I do this?

My html:

<div id="test">
<table id="tablex" cellpadding="0" cellspacing="0" border="0" class="display">
    <thead>
        <tr>
            <th>Cod</th>
            <th>Name completo</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody>
         <tr>
             <td>1</td>
             <td>John Foster 1</td>
             <td><img entity_id="1" class="image-selector" src='imagens/grid_cancel.png' title=''  /></td>
         </tr>
    </tbody>
</table>

My jQuery:

$("#tablex tbody").on("click", "td", function(event){
   alert($(this).text());
});

Answer 1

$("#tablex tbody").on("click", "td", function(event){
    alert($(this).index());
    alert($(this).siblings("td:first").text());
});

$(this).index() will give you the zero-based index of the clicked column. $(this).siblings("td:first").text() will give you the text in the first column.

Here, have a fiddle: http://jsfiddle.net/adrianonantua/EAEsG/

Answer 2

This will give you the column number of the clicked column, and the value of the 1st column...

$("#tablex tbody").on("click", "td", function(event){
   var index = $(this).index();
   var col1value = $(this).parent().find("td").first().text();
});