一、 步骤分析
1.设计好表格页面
首先在body里面创建一个表格，并设置好格式，给他一个合适的大小, 如下：
li{
width: 500px;
height: 50px ;
margin: 5px;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
2.获取要操作的 DOM 元素
var olis = document.querySelectorAll('li')
3.实现隔行变色 每一行设置一个颜色
方法一
通过索引直接给每一行设置不同颜色
olis[0].style.background = 'blue'
olis[1].style.background = 'red'
olis[2].style.background = 'blue'
olis[3].style.background = 'red'
olis[4].style.background = 'blue'
olis[5].style.background = 'red'
olis[6].style.background = 'blue'
但是，这样的方法如果要对更多的对象进行操作时，费时费力。
方法二
通过for循环去实现
for (var i = 0; i < 7; i++) {
console.log(i % 2)
if (i % 2 == 0) {
olis[i].style.background = 'blue'
} else {
olis[i].style.background = 'red'
}
i%2==0 说明索引是 0 2 4 6，反之则是单数，然后再给他们分别设置对应的颜色，隔行变色得到实现。
三元表达式写法如下：
olis[i].style.background = i%2==0 ? 'blue' : 'red';
若 i%2为0时 那就是个flase 这是 三元表达式的返回值 就是冒号后面的结果
若 i%2为1时 那就是个true 这是 三元表达式的返回值 就是问号后面的结果
把三元的返回值 赋给前面的背景颜色
3. 鼠标事件
首先我们需要把现在的颜色储存起来，当鼠标移入时当前停留的元素变色，鼠标移除颜色恢复存储时的效果。
olis[i].myBg =olis[i].style.background;
// 存储现在颜色
olis[i].onmouseenter = function(){
//鼠标进入
//this 为当前操作的那个元素
this.style.background = 'gold'
}
olis[i].onmouseleave = function(){
//鼠标离开颜色恢复存储时的myBg
this.style.background = this.myBg
}
要想出现当鼠标点击时，弹出弹框的效果，这时就需要我们添加一个鼠标事件，具体如下：
olis[i].onclick = function(){
alert(`这是第${this.myindex+1}行 背景色是${this.myBg}`)
}
这样一个完整的隔行变色事件便实现了，以上就是本文的全部内容，希望对大家的学习有所帮助。
