Получить значение Table Row щелчком мыши? (JQuery)

Question

У меня есть таблица, где я отображаю некоторые данные. Каждая строка таблицы имеет идентификатор. Этот идентификатор является значением каждого tr-тега. Когда я щелкаю строку таблицы, я хочу отобразить идентификатор в консоли.

Таблица:

$.getJSON(`http://localhost:5000/Flights/Flights/${fromAirport}/${toAirport}`)
            .then(data => {
                console.log(data);
                $('#flights').find("tr:gt(0)").fadeOut().empty();
                for (let item of data) {
                    console.log('entered loop');
                    $(`<tr value="${item.flightId}">`).appendTo('#flights')
                    .append($('<td>').html(item.date))
                    .append($('<td>').html(item.departureTime))
                    .append($('<td>').html(item.arrivalTime))
                    .append($('<td>').html(item.flightNr))
                    .append($('<td>').html(item.price))
                    .append($('<td>').html(item.airplane))
                    .append($('<td>').html(item.nrSeats))
                    .append($('<td>').html(item.nrVacant))
                    .append($('<td>').html(item.nrBooked))
                    .append($('<td>').html(item.flightId))
                }
            });

Метод щелчка:

$('#flights').on('click', function (e) {
        const entry = $(e.target.val());
        console.log(entry);
    });

Это на клик событие не работает, но я не знаю, почему. Может быть, у кого-то есть идея:)

Answer 1

Вы имеете в виду это?

Когда пользователь нажимает на tr, он получает значение

$('tr').on('click',function(){
 value = $(this).attr('value');
 console.log(value);
})

Answer 2

Здесь есть несколько ошибок:

• Целью клика является сама таблица, вы должны выбрать синтаксис tr.

• A ошибка: .val() - это jQuery функция, вы не можете использовать ее на target, вы должны закрыть символы перед: $(e.target).val().

• Даже тогда .val() используется для inputs, для этого вам необходимо напрямую обратиться к атрибуту.

Все вместе, используя делегирование события , вы можете сделать следующее :

$('#flights').on('click', 'tr', function() {
  console.log($(this).attr('value'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="flights">
  <tr value="1">
    <td>Item1</td>
  </tr>
  <tr value="2">
    <td>Item1</td>
  </tr>
</table>