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
1. First, create a hello-world.cpp file The progr...
watch : listen for data changes (change events of...
1. Tools directory file structure [root@www tools...
Table of contents Preface Modifiers of v-model: l...
Table of contents Events in js Event Type Common ...
In the past, when I needed the border length to b...
This article introduces common problems of Xshell...
This article discusses several major zero-copy te...
Table of contents Step 1: Update Packages on Cent...
Table of contents Introduction to WiFi Wireless T...
Overlay network analysis Built-in cross-host netw...
Preface So I wrote this blog. This blog also reco...
Preface Today, a developer gave me feedback that ...
In MySQL, database garbled characters can general...
this keyword Which object calls the function, and...