HTML n种方式实现隔行变色的示例代码
1. 使用CSS nth-child 伪类
CSS的nth-child伪类可以选择指定父元素下的某个子元素，我们可以利用其进行隔行变色的效果。
代码实现：
tr:nth-child(even) {
background-color: #f2f2f2;
}
在上述代码中，我们选择了table的行元素tr，使用nth-child(even)选择偶数行的tr元素，然后通过设置背景色来实现隔行变色的效果。
使用这种方式实现的隔行变色，仅需要添加一段CSS代码即可，非常简洁方便。
2. 使用JavaScript
如果需要在不支持CSS的环境下实现隔行变色，我们可以使用JavaScript来动态添加样式。
代码实现：
var rows = document.getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
if (i % 2 === 0) {
rows[i].style.backgroundColor = '#f2f2f2';
}
}
在上述代码中，我们获取了所有的行元素tr，然后通过循环遍历的方式，对偶数行的背景色进行设置。
使用JavaScript实现的隔行变色需要一段脚本来实现，稍微麻烦一些，但在不支持CSS的环境下仍然能够实现效果。
3. 使用jQuery
如果项目中已经引入了jQuery库，我们可以利用它提供的选择器与样式操作方法来实现隔行变色。
代码实现：
$('tr:even').css('background-color', '#f2f2f2');
在上述代码中，我们使用了jQuery的选择器:even选择所有偶数行的tr元素，然后通过css()方法来设置背景色。
使用jQuery实现隔行变色可以简洁地一行代码搞定，但需要确保项目中已经引入了jQuery库。
4. 使用伪元素before
除了使用伪类nth-child来选择偶数行实现隔行变色，我们还可以使用伪元素before来插入一行虚拟的元素，然后设置其背景色。
代码实现：
tr:before {
content: '';
display: block;
position: relative;
height: 100%;
width: 100%;
background-color: #f2f2f2;
}
在上述代码中，我们通过:before伪元素在每行tr之前插入了一个虚拟的元素，然后设置其背景色为#f2f2f2。
使用伪元素的方式实现隔行变色相对于其他方式有点复杂，但可以在不改变HTML结构的情况下实现效果。
总结
本文介绍了使用HTML/CSS和JavaScript/jQuery实现隔行变色的四种方式：CSS的nth-child伪类、JavaScript循环设置样式、jQuery选择器与样式操作、使用伪元素before插入虚拟元素。每种方式都有其适用的场景，选择合适的方式可以实现更加灵活可控的隔行变色效果。
对于简单的表格，使用CSS的nth-child是最简便的方式；对于需要兼容不支持CSS的环境，可以使用JavaScript来动态设置样式；对于已经引入了jQuery的项目，使用jQuery的方式可以更加简洁地实现；使用伪元素before可以在不改变HTML结构的情况下达到效果。
根据具体项目需求和环境选择合适的方式来实现隔行变色，可以提升用户体验和页面美观度。