Identify the value of a cell of the clicked line of an html table

Question

I’m trying to identify which email tr that was clicked. My problem is that regardless of the tr that I click, always returns me the same value.

Note: I would like to know the value of the cell, not the whole line.

$("#modelTable > tbody").delegate('tr', 'click', function () {
   console.log(document.getElementsByTagName('tr')[1].textContent);
});

#modelTable{
    border-collapse: collapse;
    width: calc(100% - 5px);
}
#modelTable td, #modelTable th{
    border: solid 1px lightgray;
}
#modelTable th{
    font-weight: bold;
    text-align:center;
}
#modelTable td{
    cursor: pointer;
}
#modelTable tr:nth-child(even){
    background-color: #f2f2f2;
}
#modelTable tr:hover{
    background-color: #ddd;
}
#modelTable th{
    padding-top:5px;
    padding-bottom:5px;
    text-align: left;
    background-color: #4682B4;
    color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="modelTable">
<thead>
  <tr>
    <th><spam class="lang" key="">Id User</spam></th>
    <th><spam class="lang" key="">UserEmail</spam></th>
  </tr>                          
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>2</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

How can I solve this problem ?

Answer 1

Just change it document.getElementsByTagName('tr')[1] for this. But as the colleague @Leandrade comment do not use .delegate, think and use this way for example to avoid problems in the future!

`$("#modelTable tbody tr").on('click', function() { }`

To catch only the last td you can use $(this).children().last()

Follow your code with full adjustment. I left the .delegate, but I suggest you use as above.

    $("#modelTable tbody tr").on('click', function() {
      let td = $(this).children().last();
        console.log(td.text());
    });

#modelTable {
    border-collapse: collapse;
    width: calc(100% - 5px);
}

#modelTable td,
#modelTable th {
    border: solid 1px lightgray;
}

#modelTable th {
    font-weight: bold;
    text-align: center;
}

#modelTable td {
    cursor: pointer;
}

#modelTable tr:nth-child(even) {
    background-color: #f2f2f2;
}

#modelTable tr:hover {
    background-color: #ddd;
}

#modelTable th {
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: left;
    background-color: #4682B4;
    color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="modelTable">
    <thead>
        <tr>
            <th>
                <spam class="lang" key="">Id User</spam>
            </th>
            <th>
                <spam class="lang" key="">UserEmail</spam>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>2</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>

Answer 2

Another way to get only the email:

$("#modelTable > tbody").on('click', 'tr', function () {
      console.log($(this).text().split('\n')[2].trim());
});

#modelTable{
    border-collapse: collapse;
    width: calc(100% - 5px);
}
#modelTable td, #modelTable th{
    border: solid 1px lightgray;
}
#modelTable th{
    font-weight: bold;
    text-align:center;
}
#modelTable td{
    cursor: pointer;
}
#modelTable tr:nth-child(even){
    background-color: #f2f2f2;
}
#modelTable tr:hover{
    background-color: #ddd;
}
#modelTable th{
    padding-top:5px;
    padding-bottom:5px;
    text-align: left;
    background-color: #4682B4;
    color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="modelTable">
<thead>
  <tr>
    <th><spam class="lang" key="">Id User</spam></th>
    <th><spam class="lang" key="">UserEmail</spam></th>
  </tr>                          
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>2</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

Answer 3

The document.getElementsByTagName('tr')[1] will always return the same element because you are catching the according to element on the page containing the tag tr.

The document.getElementsByTagName returns a Node list (list of nodes) that is indexed based 0, where [0] is the first element, [1] the second and so on.

In addition to what if you’re using jQuery, you don’t need to use document.getElementsByTagName. You can take the element that triggered the event with $(this), and to pick up the text inside the element, you use $(this).text().

And you reversed the order of the arguments. The event comes before the element: it would be 'click', 'tr' and not 'tr', 'click'. And don’t use .delegate because it is a discontinued jQuery method, and although it works, it will be removed from any new version.

And you don’t need to wear it either >, for the tbody is already descending from the table. And you need to get the text only from the column where the email is, which is the second column. In this case you can use the jQuery selector :eq(), which is also basic 0. I mean, to get the second column you use :eq(1). And also use the .trim(), because when picking up the text of an HTML element, it is sometimes possible to come with spaces on the edges.

The code would look like this:

$("#modelTable tbody").on('click', 'tr', function () {
   var email = $('td:eq(1)', this).text().trim();
   console.log(email);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="modelTable">
<thead>
  <tr>
    <th><spam class="lang" key="">Id User</spam></th>
    <th><spam class="lang" key="">UserEmail</spam></th>
  </tr>                          
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>2</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>