Get value of Table Row with mouse click? (JQuery)

Question

I have a table, where I display some data. Every table row has a ID. This ID is the value of every tr-tag. When I click a row of the table, I want to display the ID in the console.

Table:

$.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))
                }
            });

On Click Method:

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

This on click event is not working, but I do not really know why. Maybe someone has a idea :)

You're targeting the table being clicked...not the row. Is your event firing at all? — devlin carnate, Apr 20 '20 at 19:52
Does this answer your question? [Get the contents of a table row with a button click](https://stackoverflow.com/questions/14460421/get-the-contents-of-a-table-row-with-a-button-click) — devlin carnate, Apr 20 '20 at 19:54
U shud add the event just after the for loop. Ie inside the `then `function — Beingnin, Apr 20 '20 at 20:01
This will solve the issue of event not firing. But still you wont get the desired result. Give class to all rows and attach event to that. That seems the right way to do — Beingnin, Apr 20 '20 at 20:03

Benyamin · Answer 1 · 2020-04-20T20:19:03.343

0

Do you mean this?

When the user clicks on a tr, it receives the value

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

edited Apr 20 '20 at 20:19

answered Apr 20 '20 at 20:13

Benyamin

11
2

score -1 · Accepted Answer · answered Apr 20 '20 at 20:03

-1

There are a couple of errors here:

The target of the click is the table itself, you have to select the tr.
A syntax error: .val() is a jQuery function, you can't use it on the target, you have to close the parens before: $(e.target).val().
Even then .val() is used for inputs, for this you have to access the attribute directly.

All together, using event delegation, you can do the following:

$('#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>

answered Apr 20 '20 at 20:03

msg

7,863
3
14
33

Why does `tr` have a `value` attribute? That's not standard HTML. The OP asked for the `id` of the row. If that's not in the standard id of the element, a data attribute should be used to keep the HTML standard. – devlin carnate Apr 20 '20 at 20:07
@devlincarnate well, look at his code... `$('')`. And is valid html5 (not xhtml), parseable and accessible... – msg Apr 20 '20 at 20:09
Just because it works doesn't make it correct. `tr` elements should not have "value" attributes. Input elements have "value" attributes. A data attribute should be used instead of introducing a custom / invalid attribute. Just an FYI ;) – devlin carnate Apr 20 '20 at 22:35
@devlincarnate We'd have to agree to disagree. Are `data-` attributes preferred? Yes, and more future proof. Are they invalid?. as I said, it's invalid xhtml (since it's not allowed in the DTD), but perfectly valid html5. The angular guys seem to agree, and so does the [W3C Validator mantainer](https://stackoverflow.com/questions/18607437#29023301): "attributes which though **while non-standard are still very widely _and correctly_ used**". You can even have custom *elements* these days... – msg Apr 20 '20 at 22:59
The link you posted is referring to ANGULAR `ng-` attributes... not "value" attributes on non-input type elements. If you'll notice...the *answer* in the link you posted straight up says that data attributes should be used. You can call that a difference of opinion, but it doesn't change the fact that 1) it makes no sense for a non-input element to have a "value" and 2) data attributes should be used for custom attributes – devlin carnate Apr 20 '20 at 23:04

Get value of Table Row with mouse click? (JQuery)

2 Answers2