纯JS代码实现隔行变色鼠标移入高亮
在前端开发中经常见到隔行变色鼠标移入高亮显示的效果，下面小编给大家分享基于js代码实现的隔行变色鼠标移入高亮效果，废话不多说了，具体代码如下所示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #table { width: 400px; border-collapse: collapse; } </style> </head> <body> <table id="table" border="1"> <thead> <td>ID</td> <td>姓名</td> <td>年龄</td> </thead> <tbody> <tr> <td>1</td> <td>黄艺</td> <td>20</td> </tr> <tr> <td>2</td> <td>张三</td> <td>21</td> </tr> <tr> <td>3</td> <td>李四</td> <td>22</td> </tr> <tr> <td>4</td> <td>网无</td> <td>23</td> </tr> </tbody> </table> </body> <script type="text/javascript"> // 实现隔行变色，鼠标移入高亮 var table = document.getElementById("table"); var oldColor = "";//声明一个变量，保存表格原来的颜色 for(var i = 0; i < table.tBodies[0].rows.length; i++) { //使用判断实现隔行变色 if(i % 2 == 0) { table.tBodies[0].rows[i].style.backgroundColor = "gray"; } else { table.tBodies[0].rows[i].style.backgroundColor = "#ccc"; } //实现鼠标移入高亮 table.tBodies[0].rows[i].onmouseover = function() { oldColor = this.style.backgroundColor; this.style.backgroundColor = "red"; } //实现鼠标移出变回原来的颜色 table.tBodies[0].rows[i].onmouseout = function() { this.style.backgroundColor = oldColor; } } </script> </html>
以上所述是小编给大家介绍的纯JS代码实现隔行变色鼠标移入高亮，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
-
本文向大家介绍Javaweb 鼠标移入移出表格颜色变化的实现，包括了Javaweb 鼠标移入移出表格颜色变化的实现的使用技巧和注意事项，需要的朋友参考一下 最近在学习JavaWeb时，有用到鼠标移动事件，所以今天在这里记录一个相关的案例，同时也是对相关知识的一个巩固，效果为在鼠标移动到表格对应行列时，该行列的背景颜色发生变化。 效果如下： 其中用到是onmouseover和onmouseou事件t
-
本文向大家介绍php简单隔行变色功能实现代码 原创，包括了php简单隔行变色功能实现代码 原创的使用技巧和注意事项，需要的朋友参考一下 本文简单分析了php简单隔行变色功能实现方法。分享给大家公大家参考。具体如下： 希望本文所述对大家php程序学习有所帮助。
-
本文向大家介绍js实现鼠标拖拽缩放div实例代码，包括了js实现鼠标拖拽缩放div实例代码的使用技巧和注意事项，需要的朋友参考一下 封装为了jq插件，如下 drag.js html文件 以上所述是小编给大家介绍的js实现鼠标拖拽缩放div详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！
-
本文向大家介绍纯JS前端实现分页代码，包括了纯JS前端实现分页代码的使用技巧和注意事项，需要的朋友参考一下 先给大家展示下效果图，如果大家感觉效果不错，请参考实现代码： 因为这是我自己第一次动手用js写分页，写的应该也不是很完美，有些公共的没有抽取出来，但是用起来还是可以的，这块代码是可以把它当做公共的分页去处理的，我就是用这块代码写了两个稍微不同一些的分页！公共的代码抽取的也差不多，主要就是aj
-
本文向大家介绍纯js代码实现简单计算器，包括了纯js代码实现简单计算器的使用技巧和注意事项，需要的朋友参考一下 本文实例分享了纯js代码实现简单计算器代码，相信大家会喜欢。具体如下： 运行效果截图如下： 具体代码如下： 复制粘贴上方代码即可实现简单的计算器功能，希望本文所述对大家学习javascript程序设计有所帮助。
-
本文向大家介绍纯js实现手风琴效果代码，包括了纯js实现手风琴效果代码的使用技巧和注意事项，需要的朋友参考一下 我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发，这不仅节约了时间，也让效率大大的提高，并让公司的效益增加，何乐而不为呢？ 但是，这也会有一定的缺点，比如jQ比js慢，尤其在大型项目中就会显现出来，下面我用原生js实现一个简单的手风琴效果效果。 HTML代码如下