javascript实现表单隔行变色

本文实例为大家分享了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='';
            }
        }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • js取模(求余数)隔行变色
  • JS控制表格隔行变色
  • JS小功能(列表页面隔行变色)简单实现
  • JS与jQuery实现隔行变色的方法
  • javascript实现table表格隔行变色的方法
  • 原生JS操作网页给p元素添加onclick事件及表格隔行变色
  • Vue.js 利用v-for中的index值实现隔行变色
  • 纯js实现隔行变色效果
  • Table隔行变色的JavaScript代码
  • JavaScript实现99乘法表及隔行变色实例代码
张贴在2