Номер рядка та стовпця таблиці в jQuery


141

Як я можу отримати номер рядка та стовпця клітинки натиснутої таблиці за допомогою jQuery, тобто

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

Відповіді:


216

Ви можете використовувати функцію 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" ..... чи можна додавати ці "дані" в таблицю з цим значенням col і row
shanish

2
ROWSPAN & COLSPAN подолають: це робить натискання робочим, коли SPAN використовується jsbin.com/eyeyu/1307/edit
eddyparkinson

9
var row = $(this).closest('tr').index()
SpYk3HH


32

Отримайте 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
Daniel Powell,

1
Ви можете отримати доступ до полів "дані", просто зателефонувавши: $ (this) .data ('рядок');
WhiteAngel

0

краще прив’язати обробник кліків до всієї таблиці, а потім використовувати event.target, щоб отримати натиснуту TD. Це все, що я можу додати до цього, як його 1:20 ранку


Хоча це може бути цінним підказом для вирішення проблеми, хороша відповідь також демонструє рішення. Будь ласка редагувати надати приклад коду , щоб показати , що ви маєте в виду. Крім того, розгляньте, як написати це як коментар.
Toby Speight

1
дякую, я буду розглядати цю відповідь ще через 10 років
mkoryak
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.