How to take the value of a selected line from an html table

Question

I would like to click on a row of the table to return the value of the selected column only. My code brings all values of the tags td however as the table will be dynamically mounted need it to display only the value of the selected line. function selLinha(linha, multiplos) { var dados = ""; dados += "ID: " + document.getElementsByTagName("td")[3].innerHTML; alert(dados); } Note that to get the value you need to pass its position on the tag etElementsByTagName("td")[3]. html table <thead> <tr> <th>IP</th> <th>ID</th> </tr> <tbody> <tr style=" cursor: pointer;" onclick="ts()"> <td style=" cursor: pointer;">12</td> </tr> <tr style=" cursor: pointer;" onclick="ts()"> <td style=" cursor: pointer;">22</td> </tr> </tbody> </thead>

Answer 1

If I understand you need to make one forEach to catch each td clicked, then you use a e.currentTarget.id to catch only the id of the clicked element

Follow the image code above

var td = document.querySelectorAll('td');

td.forEach((el) => {
    el.addEventListener('click', meuID);
});

function meuID(e) {
    console.log(e.currentTarget.id);
}

<table>

    <thead>
        <tr>
            <th>IP</th>
            <th>ID</th>
        </tr>
    </thead>
    <tbody>
        <tr style="  cursor: pointer;">
            <td style="  cursor: pointer;" id="n1">12</td>
        </tr>
        <tr style="  cursor: pointer;">
            <td style="  cursor: pointer;" id="n2">22</td>
        </tr>
    </tbody>

</table>