如何用JavaScript实现表单行隔色显示效果？

本文共计628个文字，预计阅读时间需要3分钟。

原文示例：本文字例为大师分享了JavaScript实现表格隔行变色功能的整体代码，供大家参考。具体内容如下：效果如下：代码思路：

1.使用鼠标经过onmouseover和鼠标离开onmouseout事件。

2.鼠标经过tr行，当前行变色。

简化后：示例：大师分享了JavaScript表格变色代码，详如下：效果展示：代码方法：

1.利用onmouseover和onmouseout事件。

2.鼠标移行变色。

本文实例为大家分享了javascript实现表单隔行变色的具体代码，供大家参考，具体内容如下

效果如下:

代码思路:

1、用到鼠标经过onmouseover 鼠标离开onmouseout
2、鼠标经过tr行,当前的行变背景颜色,鼠标离开去掉当前的背景颜色
3、注意:第一行 th不需要变色, 只用获得有td的行,这里我们用thead和tbody进行区分

代码如下:

html部分:

<table border="1" cellpadding="10px" rules="all">             <thead>                 <tr>                     <th>one</th>                     <th>two</th>                     <th>three</th>                     <th>four</th>                 </tr>             </thead>             <tbody>                   <tr>                     <td>第一行</td>                     <td>第一行</td>                     <td>第一行</td>                     <td>第一行</td>                 </tr>                 <tr>                     <td>第二行</td>                     <td>第二行</td>                     <td>第二行</td>                     <td>第二行</td>                 </tr>                 <tr>                     <td>第三行</td>                     <td>第三行</td>                     <td>第三行</td>                     <td>第三行</td>                 </tr>                 <tr>                     <td>第四行</td>                     <td>第四行</td>                     <td>第四行</td>                     <td>第四行</td>                 </tr>                 <tr>                     <td>第五行</td>                     <td>第五行</td>                     <td>第五行</td>                     <td>第五行</td>                 </tr>             </tbody> </table>

css部分:

添加一个类,使鼠标放上去的时候变色

<style>             .bg {                 background-color: pink;             } </style>

javascript部分:

//获取元素 // 获取tbody里面的所有的行         var trs = document.querySelector("tbody").querySelectorAll("tr");           //鼠标经过时间         for (var i = 0; i < trs.length; i++) {             trs[i].onmouseover = function() {                 this.className = 'bg'             }             //鼠标离开事件             trs[i].onmouseout=function(){                 this.className='';             }         }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。