Как получить позицию <td> в таблице с помощью JQuery? Например: <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> при нажатии, но как? Ответ 1 Функция index, вызываемая без параметров, получит положение относительно своих братьев и сестер (нет необходимости перемещаться по иерархии). $('td').click(function(){ var $this = $(this); var col = $this.index(); var row = $this.closest('tr').index(); alert( [col,row].join(',') ); }); Ответ 2 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('')); }) Ответ 3 В соответствии с этим ответом DOM Level 2 предоставляет cellIndex и rowIndex свойства элементов td и tr соответственно. Позволяет сделать это, что довольно легко читается: $("td").click(function(){ var column = this.cellIndex; var row = $(this).parentNode.rowIndex; alert("[" + column + ", " + row + "]"); }); Ответ 4 В jQuery 1.6: $(this).prop('cellIndex') Ответ 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>
Ответ 1 Функция index, вызываемая без параметров, получит положение относительно своих братьев и сестер (нет необходимости перемещаться по иерархии). $('td').click(function(){ var $this = $(this); var col = $this.index(); var row = $this.closest('tr').index(); alert( [col,row].join(',') ); });
Ответ 2 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('')); })
Ответ 3 В соответствии с этим ответом DOM Level 2 предоставляет cellIndex и rowIndex свойства элементов td и tr соответственно. Позволяет сделать это, что довольно легко читается: $("td").click(function(){ var column = this.cellIndex; var row = $(this).parentNode.rowIndex; alert("[" + column + ", " + row + "]"); });
Ответ 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>