HTML Table Row Selection with CSS and JavaScript: Highlighting Issue in Edge
I've hit a wall trying to After trying multiple solutions online, I still can't figure this out. I'm trying to implement a row selection feature in an HTML table where the selected row gets highlighted. I have the following HTML structure: ```html <table id="myTable"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>30</td> <td>USA</td> </tr> <tr> <td>Anna</td> <td>22</td> <td>Sweden</td> </tr> <tr> <td>Mike</td> <td>32</td> <td>Canada</td> </tr> </tbody> </table> ``` I'm using the following JavaScript to handle the row click event and apply a CSS class for highlighting: ```javascript const rows = document.querySelectorAll('#myTable tbody tr'); rows.forEach(row => { row.addEventListener('click', function() { rows.forEach(r => r.classList.remove('highlight')); // Remove highlight from all rows this.classList.add('highlight'); // Add highlight to the clicked row }); }); ``` And my CSS for the highlight class is: ```css .highlight { background-color: yellow; } ``` This works perfectly in Chrome and Firefox, but in Edge (version 92.0.902.62), the row doesn't remain highlighted after clicking. Instead, clicking another row causes the previously highlighted row to briefly flash yellow and then return to its original color. I verified that the CSS class is being added and removed correctly, but the visual effect isn’t as expected. I've tried adding `setTimeout` to delay the removal of the class, thinking it might be a rendering issue, but that didn’t help. Also, I checked for any conflicting CSS rules, but nothing seems to override the highlight class. I'm running this on a simple HTML page without any frameworks or libraries. Is there a known issue with Edge regarding CSS transitions, or is there something I might be missing in my implementation? I'm working on a application that needs to handle this. I'd really appreciate any guidance on this.