jQuery - событие Click для <tr>элементов в таблице и получение значений элементов <td>

Question

У меня есть следующий 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 () для прикрепить обработчики событий.

Answer 1

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

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

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

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

$("div.custList table tr")

---

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

Answer 2

Попробуйте функцию 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()указать элемент в элементе, с которым нужно действовать.

Answer 3

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

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

Answer 4

Поскольку элементы TR обертывают элементы TD, на самом деле вы нажимаете на TD (затем он всплывает до TR), чтобы вы могли упростить свой селектор. Получить значения проще и в этом случае, кликнувший TD это this, 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!!??
    });
});​

Answer 5

$("body").on("click", "#tableid tr", function () {
    debugger
    alert($(this).text());
});

$("body").on("click", "#tableid td", function () {
    debugger
    alert($(this).text());
});

Answer 6

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

Answer 7

<script>
jQuery(document).ready(function() {
    jQuery("tr").click(function(){
       alert("Click! "+ jQuery(this).find('td').html());
    });
});
</script>