Click event to tag tr of a table

Asked

Viewed 173 times

1

I have a table HTML which I fill with data I own in a database.

Each tag tr of my table represents a client, disregarding tag tr header.

I would like to add an event of click to the tags tr, as if they were selecting a customer.

HTML table :

<table id="modelTable">
      <thead>
        <tr>
        <th>Id User</th>
        <th>UserEmail</th>
        <th>CodeCustomer</th>
        <th>DateCreation</th>
        <th>DateContract</th>
        <th>Condition</th>
        </tr>                          
      </thead>
      <tbody></tbody>
    </table>

I’m trying this way (Java) :

document.getElementsByTagName("tr").addEventListener('click', function () {
      console.log("clique");
});

Error :

Uncaught Typeerror: Document.getelementsbytagname(...). addeventlistener is not a Function At Htmlanchorelement.

I must be missing something, although I’ve spent some time looking, I wish someone could point out to me where I’m going wrong.

javascript html

  • It won’t work even when you do this Document.getelementsbytagname("tr") is returning a nodelist or an array with all elements tr document, even if you only have one. Vc prercises access by an index like this for example [0]

  • @Leandrade Thank you for the comment. Your suggestion worked in parts, because only this working for the tag tr of index 0. When I add for example the index 1 appears this error : Uncaught Typeerror: Cannot read Property 'addeventlistener' of Undefined at Htmlanchorelement.<Anonymous>

  • Yeah, because there’s only one tr.

  • @ Leandrade But there would be no way to add the click event to the tr tags that are added to the table (createelement("tr")) ?

  • 1

    Yeah, sure, but then it’s another scam, you’re gonna have to do one for() going through the entire document and accessing the contents of the.

2 answers

3

The method getElementsByTagName of the interface documentation returns a HTMLCollection and not a HTMLAnchorElement). I think that might interest you What is the difference between Nodelist and Htmlcollection?

One way around that is to change the getElementsByTagName for querySelector or querySelectorAll and make a forEach() to take only the tr clicked

Here is an example:

const tr = document.querySelectorAll('tbody tr');

function teste() {
	console.log('oi');
}

tr.forEach( function (e) {
    e.addEventListener('click', teste)
})
<table id="modelTable">
    <thead style="background: silver">
        <tr>
            <th>Id User</th>
            <th>UserEmail</th>
            <th>CodeCustomer</th>
            <th>DateCreation</th>
            <th>DateContract</th>
            <th>Condition</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Id User</th>
            <th>UserEmail</th>
            <th>CodeCustomer</th>
            <th>DateCreation</th>
            <th>DateContract</th>
            <th>Condition</th>
        </tr>
        <tr>
            <th>Id User</th>
            <th>UserEmail</th>
            <th>CodeCustomer</th>
            <th>DateCreation</th>
            <th>DateContract</th>
            <th>Condition</th>
        </tr>
    </tbody>
</table>

  • "disregarding the header tag tr"...

  • 1

    Just change it to document.querySelectorAll('#modelTable tbody tr').

  • @Sam thanks for the remark! I just edited it. Hhaha was kind of what I did, I used tbody on the :D selector

  • 1

    That’s it man, +1

  • @Leandrade is impressive as 20% of JS solves 80% of rss problems. JS is very mass, hj even I was seeing these answers your https://answall.com/questions/410012/filler-campo-text-area-enquanto-%C3%A9-typed-informs%C3%A7%C3%a3o-no-input/410021#410021 I didn’t know the .textContent I found the way you did it well, and the other guy’s response I thought it was cool. That’s why I hear that jQuery is going to die. Tmj

  • 1

    Cool Hugo, thanks! Really although it is very good, it is increasingly rare to find jQuery around.

  • 1

    I find it difficult for jQuery to die. You only carry 80KB of code that makes it much easier to manipulate elements in JS. If you’re going to die one day, you might as well be, but I think you’re still far from it.

Show 2 more comments

1


$(document).ready(function(){
    $("#modelTable > tbody > tr").on('click', function() {
        console.log("clique");
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="modelTable">
  <thead>
    <tr>
    <th>Id User</th>
    <th>UserEmail</th>
    <th>CodeCustomer</th>
    <th>DateCreation</th>
    <th>DateContract</th>
    <th>Condition</th>
    </tr>                          
  </thead>
  <tbody>
    <tr>
      <td>teste</td>
      <td>teste</td>
      <td>teste</td>
      <td>teste</td>
      <td>teste</td>
    </tr>
  </tbody>
</table>;

  • 1

    @Levi could have specified in the tags that tbm could use jquery, and just to let record that this method delegate() is deprecated as documented: https://api.jquery.com/Delegate/

  • 1

    @Leandrade thanks for the warning. Correction has been made.

  • 1

    Unnecessary these >, but.... D

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.