<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js实现表格鼠标经过行变色</title> </head> <body> <table> <thead> <tr> <th>name</th> <th>age</th> <th>sex</th> </tr> </thead> <tbody> <tr> <td>zhangsan</td> <td>34</td> <td>men</td> </tr> <tr> <td>zhangsan</td> <td>34</td> <td>men</td> </tr> <tr> <td>zhangsan</td> <td>34</td> <td>men</td> </tr> <tr> <td>zhangsan</td> <td>34</td> <td>men</td> </tr> </tbody> </table> <style> .bg{ background-color: blueviolet; } </style> <script> var trs = document.querySelector('tbody').querySelectorAll('tr'); for(var i = 0; i < trs.length; i++){ trs[i].onmouseover = function(){ this.className='bg'; } trs[i].onmouseout = function(){ this.className=''; } } </script> </body> </html>