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

Ответ 1

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

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

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

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

$("div.custList table tr")

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

Ответ 2

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

Ответ 3

Так как элементы 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

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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