¿Cómo obtener una posición de <td> en una tabla usando JQuery?

Question

Por ejemplo:

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

Quiero usando la siguiente función:

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

para obtener la posición de los <td> `s cuando se hace clic, pero ¿cómo?

Answer 1

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 2

En jQuery 1.6:

$(this).prop('cellIndex') 

Answer 3

La función index llamada sin parámetros obtendrá la posición en relación con sus hermanos (sin necesidad de atravesar la jerarquía).

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

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

Answer 4

Según this answer, DOM Nivel 2 expone cellIndex y rowIndex propiedades de td y tr elementos, respectivamente.

le permite hacer esto, lo cual es bastante legible:.

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

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

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

Answer 5

$("td").click(function(e){ 
 
    alert(e.target.parentElement.rowIndex + " " + e.target.cellIndex) 
 
});

tr, td { 
 
    padding: 0.3rem; 
 
    border: 1px solid black 
 
} 
 

 
table:hover { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td>0, 0</td> 
 
    <td>0, 1</td> 
 
    <td>0, 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1, 0</td> 
 
    <td>1, 1</td> 
 
    <td>1, 2</td> 
 
    </tr> 
 
</table>