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","" );
}
);