Строка таблицы и номер столбца в jQuery - PullRequest
135 голосов
/ 25 апреля 2009

Как получить номер строки и столбца ячейки таблицы, по которой щелкнули, используя jQuery, т.е.

$("td").onClick(function(event){
   var row = ...
   var col = ...
});

Ответы [ 6 ]

207 голосов
/ 25 апреля 2009

Вы можете использовать функцию Core / index в данном контексте, например, вы можете проверить индекс TD в его родительском TR, чтобы получить номер столбца, и вы можете проверить индекс TR на Таблица, чтобы получить номер строки:

$('td').click(function(){
  var col = $(this).parent().children().index($(this));
  var row = $(this).parent().parent().children().index($(this).parent());
  alert('Row: ' + row + ', Column: ' + col);
});

Проверьте работающий пример здесь .

115 голосов
/ 08 марта 2011
$('td').click(function() {
    var myCol = $(this).index();
    var $tr = $(this).closest('tr');
    var myRow = $tr.index();
});
28 голосов
/ 10 августа 2012

Получите ИНДЕКС КОЛОННЫ при нажатии:

$(this).closest("td").index();

Получите ИНДЕКС РЯДА при нажатии:

$(this).closest("tr").index();
21 голосов
/ 25 апреля 2009

От макушки головы можно было бы взять все предыдущие элементы и сосчитать их.

$('td').click(function(){ 
    var colIndex = $(this).prevAll().length;
    var rowIndex = $(this).parent('tr').prevAll().length;
});
6 голосов
/ 25 апреля 2009

Можно ли вывести эти данные в ячейки при создании таблицы?

чтобы ваш стол выглядел так:

<table>
  <thead>...</thead>
  <tbody>
    <tr><td data-row='1' data-column='1'>value</td>
      <td data-row='1' data-column='2'>value</td>
      <td data-row='1' data-column='3'>value</td></tr>

  <tbody>
</table>

тогда было бы просто дело

$("td").click(function(event) {
   var row = $(this).attr("data-row");
   var col = $(this).attr("data-col");
}
0 голосов
/ 25 апреля 2009

лучше привязать обработчик кликов ко всей таблице, а затем использовать event.target, чтобы получить кликнутый TD. Вот и все, что я могу добавить к этому как 1:20 утра

.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...