js 隔行变色+鼠标移上换色+鼠标离开颜色恢复+鼠标点击弹出点击的是第几行是什么颜色

隔行变色:
先获取要操作的HTML标签

var oLis = document.querySelectorAll('li')

循环HTML标签

for (var i = 0; i < oLis.length; i++) {}

利用for循环达到一条三元判断语句就能为奇数行和偶数行换上不同的背景颜色

oLis[i].style.background = i % 2 ? 'blue' : 'red';

鼠标移上变色：
在for循环中创建鼠标移上事件 并从新为该html标签上背景色
利用for循环来达到一条鼠标移上事件就能复用的目的

oLis[i].onmouseenter = function () {
     this.style.background = 'gold';
}

鼠标移出恢复原本的颜色：
在for循环中创建鼠标移出事件 并从新为该html标签换上之前的背景色
利用for循环来达到一条鼠标移出事件就能复用的目的

oLis[i].onmouseleave = function () {
     this.style.background = this.myBg;
}

点击html元素弹出点击的是哪行html元素 和 点击的html行数是什么颜色:
在for循环中添加一个保存行数的变量

oLis[i].myIndex = i; 

在for循环中添加一个保存颜色的变量

oLis[i].myBg = i % 2 ? 'blue' : 'red';

在for循环中创建鼠标点击事件 并在事件里填入警告显示
利用for循环来达到一条鼠标点击事件就能复用的目的

oLis[i].onclick = function(){
     alert(`这是第${this.myIndex}行 背景颜色是${this.myBg}`);
}

完整代码