Как получить позицию <td>в таблице, используя JQuery?

Question

Например:

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

Я хочу использовать следующую функцию:

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

чтобы получить позицию <td> при нажатии, но как?

Answer 1

Функция index, вызываемая без параметров, получает позицию относительно своих братьев и сестер (нет необходимости проходить иерархию).

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

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

Answer 2

Ядро / индекс

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

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

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

Answer 3

Согласно этому ответу , DOM Level 2 предоставляет cellIndex и rowIndex свойств элементов td и tr соответственно.

Позволяет вам сделать это, что довольно читабельно:

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

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

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

Answer 4

В jQuery 1.6:

$(this).prop('cellIndex')

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>