jQuery — событие щелчка по элементам ‹tr› в таблице и получение значений элементов ‹td›

У меня есть следующий HTML-код в файле JSP:

<div class="custList">
   <table class="dataGrid">
      <c:forEach var="cust" items="${custList}">
         <tr>
            <td>${cust.number}</td>
            <td>${cust.description}</td>
            <td>${cust.type}</td>
            <td>${cust.status}</td>
        </tr>
     </c:forEach>
  </table>
</div>

Мне нужно иметь возможность запускать событие 'click' для каждого из динамически созданных тегов <tr>, а также иметь доступ к значениям тегов <td> (нажатых <tr>) из функции JavaScript. У меня уже есть эта функция, но, к сожалению, она не работает.

$(document).ready(function() {
    $("div.custList > table > tr").live('click', function() {
        alert("You clicked my <tr>!");
        //get <td> element values here!!??
    });
});

Обновление (январь 2016 г.): jQuery.live устарел (как указано здесь:http://api.jquery.com/live/)

Начиная с jQuery 1.7, метод .live() устарел. Используйте .on() для присоединения обработчиков событий.


javascript jquery jquery-selectors
person Randall Kwiatkowski    schedule 11.08.2010    source источник

Ответы (5)


arrow_upward
38
arrow_downward

Если не указано иное (<tfoot>, <thead>), браузеры помещают <tr> неявно в <tbody>.

Вам нужно поставить > tbody между > table и > tr:

$("div.custList > table > tbody > tr")

В качестве альтернативы вы также можете быть менее строгим в выборе строк (> обозначает непосредственный дочерний элемент):

$("div.custList table tr")

Тем не менее, вы можете получить непосредственных <td> дочерних элементов с помощью $(this).children('td').

person BalusC    schedule 11.08.2010
comment
не знал о вставке тега ‹tbody›. Спасибо за помощь работает отлично. :) - person Randall Kwiatkowski; 11.08.2010
comment
Кроме того, если вы хотите получить строки таблицы, содержащие хотя бы 1 td, используйте следующий код: $("div.custList table tr:has(td)").click(function () { //Code here }); это поможет вам пропустить первую строку заголовка таблицы. - person Max; 14.08.2014

arrow_upward
22
arrow_downward

Попробуйте функцию jQuery delegate(), например:

$(document).ready(function(){
    $("div.custList table").delegate('tr', 'click', function() {
        alert("You clicked my <tr>!");
        //get <td> element values here!!??
    });
});

Делегат работает так же, как live(), за исключением того, что live() нельзя применять к элементам в цепочке, тогда как delegate() позволяет указать элемент внутри элемента для выполнения действия.

person SimonDowdles    schedule 11.08.2010
comment
Начиная с jQuery 1.7, .delegate() был заменен методом .on(). - person azerafati; 06.09.2014
comment
Этот ответ (с обновлением @Bludream) является наиболее эффективным способом привязки событий, поскольку вам не нужно привязываться к каждому tr, а только к родительскому элементу (в нашем случае это таблица). - person graumanoz; 18.08.2015

arrow_upward
9
arrow_downward

Эта работа для меня!

$(document).ready(function() {
    $(document).on("click", "#tableId tbody tr", function() {
        //some think
    });
});
person Erik Ramirez    schedule 22.06.2017

arrow_upward
5
arrow_downward

Поскольку элементы TR оборачивают элементы TD, то, что вы на самом деле щелкаете, является TD (затем оно всплывает до TR), поэтому вы можете упростить свой селектор. Получение значений таким образом также проще, TD, на который нажали, это, TR, который его обертывает, это this.parent

Измените код JavaScript на следующий:

$(document).ready(function() {
    $(".dataGrid td").click(function() {
        alert("You clicked my <td>!" + $(this).html() + 
              "My TR is:" + $(this).parent("tr").html());
        //get <td> element values here!!??
    });
});​
person JKirchartz    schedule 11.08.2010

arrow_upward
2
arrow_downward

$(this).find('td') даст вам массив td в файле tr.

person VeeWee    schedule 11.08.2010
comment
Обратите внимание, что это также вернет все <td> любых вложенных таблиц. children() возвращает непосредственных потомков, как это сделал бы $(this).find('> td'). - person BalusC; 11.08.2010