小编给大家分享一下JavaScript实现鼠标经过表格行给出颜色标识的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
Java是什么
Java是一门面向对象编程语言,可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序。
代码:
<!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>代码</th> <th>名称</th> <th>最新公布净值</th> <th>累计净值</th> <th>前单位净值</th> <th>净值增长率</th> </tr> <tr> <td>003526</td> <td>农银金穗3个月定期开放债券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>农银金穗3个月定期开放债券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>农银金穗3个月定期开放债券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>农银金穗3个月定期开放债券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>农银金穗3个月定期开放债券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>农银金穗3个月定期开放债券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </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>
以上是“JavaScript实现鼠标经过表格行给出颜色标识的方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!