2

I have a table skeleton created in the HTML and then added options based on JSON data in my js. I currently have the rows & options for the table created from that js, so that the data can be dynamic.

Eventually I'd like to have data show/do something after you hover a row. I decided to just try and implement a background-color change for now, to verify it works.

However, I'm running into some issues. It's not able to recognize the different rows inside my table.

Here's a code pen link, https://codepen.io/robersoniastate/pen/zgqXzY?editors=1111

Is this due to how I'm creating the rows & options inside my javascript?

If I change it to look for ".tr", it only finds the header row. If I change it to look for ".tbody", it affects the whole body.

I also tried creating a class when my js appends the tr, which you can see in the code shown here. This provided 0 highlighting.

$(".myRows").hover(
  function() {
    console.log('hover called');
    $( this ).css("background","yellow" );
  }, function() {
    $( this ).css( "background","" );
  }
);
Jay
  • 21
  • 1
  • Looks like you are trying to attach an event when the rows don't actually exist yet. You'll have to [delegate your event](https://learn.jquery.com/events/event-delegation/) – zgood Jul 24 '19 at 15:13
  • 1
    or just wrap it in a document.ready() – Chris Hawkes Jul 24 '19 at 15:13
  • @ChrisHawkes - I think wrapping in a `document.ready()` will probably insufficient if the rows are added dynamically by JS, unless the listener assignment is executed _after_ those rows are added. – Alexander Nied Jul 24 '19 at 15:16

0 Answers0