table表格鼠标移动变色html静态页码代码

admin

table表格鼠标移动变色html静态页码代码

前端html代码：

1. <table id="jhTable">
   
2. <tr>
   
3. <td>Row 1, Cell 1</td>
   
4. <td>Row 1, Cell 2</td>
   
5. </tr>
   
6. <tr>
   
7. <td>Row 2, Cell 1</td>
   
8. <td>Row 2, Cell 2</td>
   
9. </tr>
   
10. </table>
    

复制代码

css代码：

1. #jhTable tr:hover {
   
2.   background-color: #f5f5f5;
   
3. }

复制代码

JS代码：

1. document.addEventListener('DOMContentLoaded', function() {
   
2.   var table = document.getElementById('myTable');
   
3.   table.addEventListener('mouseover', function(e) {
   
4.     if (e.target.tagName.toUpperCase() === 'TD') {
   
5.       e.target.parentNode.style.backgroundColor = '#f5f5f5';
   
6.     }
   
7.   });
   
8.   table.addEventListener('mouseout', function(e) {
   
9.     if (e.target.tagName.toUpperCase() === 'TD') {
   
10.       e.target.parentNode.style.backgroundColor = '';
    
11.     }
    
12.   });
    
13. });

复制代码