This article shares with you how to use JavaScript to give color labels when the mouse passes over a table row. The specific content is as follows Code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } table { margin: 100px auto; width: 800px; border-spacing: 0; text-align: center; } table tr:nth-child(1) { background-color: rgb(135, 206, 235); } table tr:nth-child(n+2) { border-bottom: 1px solid black; } th { font-size: 14px; padding-top: 5px; padding-bottom: 5px; } td { font-size: 12px; padding-top: 8px; padding-bottom: 8px; color: blue; border-bottom: 1px solid lightgray; } </style> </head> <body> <table> <tr> <th>Code</th> <th>Name</th> <th>Latest published net worth</th> <th>Accumulated net value</th> <th>Previous unit net value</th> <th>Net asset growth rate</th> </tr> <tr> <td>003526</td> <td>Agricultural Bank of China Jinsui 3-month regular open bond</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> +0.047% </tr> <tr> <td>003526</td> <td>Agricultural Bank of China Jinsui 3-month regular open bond</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> +0.047% </tr> <tr> <td>003526</td> <td>Agricultural Bank of China Jinsui 3-month regular open bond</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> +0.047% </tr> <tr> <td>003526</td> <td>Agricultural Bank of China Jinsui 3-month regular open bond</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> +0.047% </tr> <tr> <td>003526</td> <td>Agricultural Bank of China Jinsui 3-month regular open bond</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> +0.047% </tr> <tr> <td>003526</td> <td>Agricultural Bank of China Jinsui 3-month regular open bond</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> +0.047% </tr> </table> <script> var rows = document.querySelectorAll(' table tr:nth-child(n+2)'); for (var i = 0; i < rows.length; i++) { rows[i].onmouseover = function() { this.style.backgroundColor = "lightblue"; } rows[i].onmouseout = function() { this.style.backgroundColor = ""; } } </script> </body> </html> The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Solve the problem of MYSQL connection port being occupied and introducing file path errors
>>: How to build a standardized vmware image for kubernetes under rancher
Table of contents 1. Introduction 2. Configuratio...
1. Prerequisites Since I have installed it severa...
Table of contents introduce Object attributes in ...
When building a B/S system interface, you often en...
This article shares the specific code of vue+vide...
Table of contents What is axios? Axios request ty...
Preface : Today I was asked, "Have you carefu...
1. Add fields: alter table table name ADD field n...
Feelings: I am a backend developer. Sometimes when...
Table of contents 1. Demand 2. Implementation 3. ...
<input> is used to collect user information ...
Prometheus (also called Prometheus) official webs...
There are two files a.htm and b.htm. In the same d...
Table of contents 1. Introduction 2. Scenario 3. ...
Today's article mainly introduces the reload ...