How to get a <td> 's position in a table using JQuery?

Question

For example:

<table>
<tr><td>1,1</td><td>2,1</td></tr>
<tr><td>2,1</td><td>2,2</td></tr>
</table>

I want to using the following function:

$("td").click(function(){
alert(xxxx)
})

to get the <td> `s position when clicked, but how?

Answer 1

As per this answer, DOM Level 2 exposes cellIndex and rowIndex properties of td and tr elements, respectively.

Lets you do this, which is pretty readable:

$("td").click(function(){

    var column = this.cellIndex;
    var row = $(this).parentNode.rowIndex;

    alert("[" + column + ", " + row + "]");
});

Answer 2

The index function called with no parameters will get the position relative to its siblings (no need to traverse the hierarchy).

$('td').click(function(){   
   var $this = $(this);
   var col   = $this.index();
   var row   = $this.closest('tr').index();

   alert( [col,row].join(',') );
});

Answer 3

Core / index

$("td").click(function(){

    var column = $(this).parent().children().index(this);
    var row = $(this).parent().parent().children().index(this.parentNode);

    alert([column, ',', row].join(''));
})

Answer 4

In jQuery 1.6 :

$(this).prop('cellIndex')