У меня есть следующий 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> (из нажатых {{X3}) }) из функции 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 () для присоединения обработчиков событий.

36
Randall Kwiatkowski 11 Авг 2010 в 17:08

7 ответов

Лучший ответ

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

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

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

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

$("div.custList table tr")

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

37
BalusC 11 Авг 2010 в 13:22
<script>
jQuery(document).ready(function() {
    jQuery("tr").click(function(){
       alert("Click! "+ jQuery(this).find('td').html());
    });
});
</script>
-3
Adrian P. 3 Фев 2016 в 17:25

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

2
Dor Cohen 6 Фев 2013 в 11:33
$("body").on("click", "#tableid tr", function () {
    debugger
    alert($(this).text());
});

$("body").on("click", "#tableid td", function () {
    debugger
    alert($(this).text());
});
4
Nilesh Savaliya 14 Мар 2016 в 09:27

Так как элементы 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!!??
    });
});​
4
JKirchartz 11 Авг 2010 в 13:32

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

$(document).ready(function() {
    $(document).on("click", "#tableId tbody tr", function() {
        //some think
    });
});
8
Erik Ramirez 22 Июн 2017 в 20:46

Попробуйте использовать функцию delegate() в jQuery:

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

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

19
Peter Mortensen 17 Окт 2012 в 17:32