js 隔行变色 与 移入变色

隔行变色 与 移入变色

var bianse = document.querySelector(".bianse");//隔行变色
var tie = true;//设置变量=true
function bian(){//函数  在标签内用点击事件调用
    var set = document.querySelectorAll("tbody>tr");//提取所有的tr
    if(tie){//判断上面设置的变量   是
        // bianse.innerHTML = "关闭隔行变色"
        for( let i = 0; i < set.length; i++ ){//循环提取出的tr长度
            bianse.innerHTML = "关闭隔行变色"//设置隔行变色按钮的文本
            if( i%2 == 0 ){//判断tr长度的下标%2==0
                set[i].className = 'a';//将css中设置的样式赋值给提取出的tr的下标  鼠标滑过与设置的背景颜色同名
            } else {//否 在tr长度的下标不==0
                set[i].className = 'b';//将css中设置的另一个样式赋值给提取出的tr的下标  鼠标滑过与设置的背景颜色同名
            }
            tie = false;//上边运行完  设置的变量改为=false
        }
        // tie = false;
    } else {//判断变量   否
        // bianse.innerHTML = "开启隔行变色";
        for( let i = 0; i < set.length; i++ ){//循环提取出的tr的长度
            bianse.innerHTML = "开启隔行变色";//再将隔行变色按钮的文本设置成初始文本
            set[i].className = '';//让css中设置的样式=空  赋值给提取出来的tr的下标
            tie = true;//上面所有都执行完让设置的变量=true
        }
        // tie = true;
    }
} 

移入变色 鼠标进入哪一行 哪一行变色

var a = true;
var bians = document.querySelector(".bianse");
function bian(){
    var ser = document.querySelectorAll("tbody>tr");
    if(a){
        bians.innerHTML = "关闭移入变色";
        for( let i = 0; i < ser.length; i++ ){
            ser[i].onmouseover = function (){
                this.className = 'bg';
            }
            ser[i].onmouseout = function (){
                this.className = '';
            }
        }
        a = false;
    } else {
        bians.innerHTML = "开启移入变色";
        for( let i = 0; i < ser.length; i++ ){
            ser[i].onmouseover = function (){
                this.className = '';
            }
        }
        a = true;
    }
}