Найти индекс строки таблицы с помощью jQuery

Question

Я промежуточный пользователь в jQuery. Я знаю, чтобы найти rowIndex таблицы, используя jQUery, но мой сценарий другой. Моя таблица (GridView) состоит из 20 столбцов и каждого столбца с различными элементами управления, такими как текстовое поле, выпадающий список, изображение, метка. Все элементы управления на стороне сервера в каждой строке. Я связываю gridview с записями из базы данных. Теперь, когда я нажимаю на любой элемент управления или замену любого текстового поля, мне нужно получить rowIndex строки этого измененного столбца. Вот код, который у меня есть:

$("#gv1 tr input[name $= 'txtName']").live('click', function(e){
   alert($(this).closest('td').parent().attr('sectionRowIndex'));
});

Но я не могу получить rowIndex. Если я использую любой элемент управления html внутри gridview, я могу получить rowIndex. Есть ли способ узнать rowIndex при нажатии на элемент управления сервером внутри gridview?

Answer 1

Попробуйте это:

var rowIndex = $(this)
    .closest('tr') // Get the closest tr parent element
    .prevAll() // Find all sibling elements in front of it
    .length; // Get their count

Answer 2

sectionRowIndex является свойством элемента <tr>, а не атрибутом.

Правильный способ изменить ваш пример кода - получить доступ к элементу jQuery с помощью нулевого индексатора, например:

$("#gv1 tr input[name $= 'txtName']").live('click', function(e){
   alert($(this).closest('td').parent()[0].sectionRowIndex);
});

Это вернет правильный индекс строки для вас. Кроме того, если вы собираетесь использовать функцию jQuery .closest() для обхода DOM, а также .parent(), почему бы не объединить эти два и просто пройти до ближайшего <tr> элемента?

$("#gv1 tr input[name $= 'txtName']").live('click', function(e){
   alert($(this).closest('tr')[0].sectionRowIndex);
});

Это также будет обрабатывать странные случаи, когда отношения родитель -> ребенок не совсем то, что вы ожидали. Например, если вы связали $(this).parent().parent(), а затем решили обернуть свою внутреннюю ячейку другим div или span, вы можете испортить отношения. .closest() - это простой способ убедиться, что он всегда будет работать.

Конечно, мои примеры кода повторно используют предоставленный вами пример выше. Вы можете сначала протестировать более простой селектор, чтобы убедиться, что он работает, а затем уточнить ваши селекторы.

Answer 3

Это для флажка в ячейке таблицы, при изменении:

 var row = $(this).parent().parent();
 var rowIndex = $(row[0].rowIndex);
 console.log(rowIndex);

Answer 4

Должно быть в состоянии просто использовать:

var rowIndex = $(this).parents("tr:first")[0].rowIndex;