Номер строки и столбца таблицы в jQuery

142

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

$("td").onClick(function(event){
   var row = ...
   var col = ...
});
Йонас
источник

Ответы:

217

Вы можете использовать функцию 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);
});

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

Кристиан К. Сальвадо
источник
Почему он не работает на промежутках столбцов @grom?
EarlyPoster
@Forkrul Assail, @CMS Ошибка ROWSPAN's jsbin.com/eyeyu/1099/edit#preview Щелкните ячейку с текстом «12» . Индекс столбца должен быть 4
Эндрю Д.
У меня есть некоторые данные в переменной "data" ..... можно ли добавить эти "данные" в таблицу с этим значением
столбца
2
Обход ROWSPAN и COLSPAN: это заставляет работать щелчок при использовании SPAN jsbin.com/eyeyu/1307/edit
eddyparkinson
9
var row = $(this).closest('tr').index()
SpYk3HH
119
$('td').click(function() {
    var myCol = $(this).index();
    var $tr = $(this).closest('tr');
    var myRow = $tr.index();
});
Филипп Сенн
источник
34

Получите COLUMN INDEX при нажатии:

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

Получите ROW INDEX при нажатии:

$(this).closest("tr").index();
Луи Сантиано
источник
21

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

$('td').click(function(){ 
    var colIndex = $(this).prevAll().length;
    var rowIndex = $(this).parent('tr').prevAll().length;
});
Саманта Бранхам
источник
6

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

так что ваша таблица будет выглядеть так:

<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");
}
Крис Брандсма
источник
1
Какой спецификации html соответствуют эти атрибуты? Кажется, я не могу их найти.
Саманта Бранхам,
5
Спецификация HTML 5, которая позволяет настраивать атрибуты, начинающиеся с префикса «data-».
Крис Брандсма,
даже если они не соответствуют спецификации, это не сломает старые браузеры <HTML5
Дэниел Пауэлл
1
Вы можете получить доступ к полям «данных», просто вызвав: $ (this) .data ('row');
WhiteAngel
0

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

Макоряк
источник
Хотя это может быть ценным советом для решения проблемы, хороший ответ также демонстрирует решение. Пожалуйста, отредактируйте, чтобы предоставить пример кода, чтобы показать, что вы имеете в виду. В качестве альтернативы можно написать это как комментарий.
Тоби Спейт
1
спасибо, я рассмотрю возможность пересмотра этого ответа еще через 10 лет
mkoryak