有时候为了使表格显示得更为显眼，区分不同的行，更易于查看，可以采用隔行变色来达到这样的效果，原表格效果如下所示：
我们所要实现的效果如下：
html 表格框架代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>隔行变色-CSS</title>
<style type="text/css">
.datalist{
border:1px solid #007108;
font-family:Arial;
border-collapse:collapse;
background-color:#d9ffdc;
font-size:14px;
}
.datalist th{
border:1px solid #007108;
background-color:#00a40c;
color:#FFFFFF;
font-weight:bold;
padding: 4px 12px;
text-align:center;
}
.datalist td{
border:1px solid #007108;
text-align:left;
padding: 4px 10px;
}
</style>
</head>
<body>
<table class="datalist" summary="list of members in EE Studay" id="oTable">
<tr>
<th scope="col">Name</th>
<th scope="col">Class</th>
<th scope="col">Birthday</th>
<th scope="col">Constellation</th>
<th scope="col">Mobile</th>
</tr>
<!-- 奇数行 -->
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<!-- 偶数行 -->
<tr class="altrow">
<td>fresheggs</td>
<td>W610</td>
<td>Nov 5th</td>
<td>Scorpio</td>
<td>1038818</td>
</tr>
<!-- 奇数行 -->
<tr>
<td>girlwing</td>
<td>W210</td>
<td>Sep 16th</td>
<td>Virgo</td>
<td>1307994</td>
</tr>
<!-- 偶数行 -->
<tr class="altrow">
<td>tastestory</td>
<td>W15</td>
<td>Nov 29th</td>
<td>Sagittarius</td>
<td>1095245</td>
</tr>
<!-- 奇数行 -->
<tr>
<td>lovehate</td>
<td>W47</td>
<td>Sep 5th</td>
<td>Virgo</td>
<td>6098017</td>
</tr>
<!-- 偶数行 -->
<tr class="altrow">
<td>slepox</td>
<td>W19</td>
<td>Nov 18th</td>
<td>Scorpio</td>
<td>0658635</td>
</tr>
<!-- 奇数行 -->
<tr>
<td>smartlau</td>
<td>W19</td>
<td>Dec 30th</td>
<td>Capricorn</td>
<td>0006621</td>
</tr>
<!-- 偶数行 -->
<tr class="altrow">
<td>shenhuanyan</td>
<td>W25</td>
<td>Jan 31th</td>
<td>Aquarius</td>
<td>0621827</td>
</tr>
<!-- 奇数行 -->
<tr>
<td>tuonene</td>
<td>W210</td>
<td>Nov 26th</td>
<td>Sagittarius</td>
<td>0091704</td>
</tr>
<!-- 偶数行 -->
<tr class="altrow">
<td>ArthurRivers</td>
<td>W91</td>
<td>Feb 26th</td>
<td>Pisces</td>
<td>0468357</td>
</tr>
<!-- 奇数行 -->
<tr>
<td>reconzansp</td>
<td>W09</td>
<td>Oct 13th</td>
<td>Libra</td>
<td>3643041</td>
</tr>
<!-- 偶数行 -->
<tr class="altrow">
<td>linear</td>
<td>W86</td>
<td>Aug 18th</td>
<td>Leo</td>
<td>6398341</td>
</tr>
<!-- 奇数行 -->
<tr>
<td>laopiao</td>
<td>W41</td>
<td>May 17th</td>
<td>Taurus</td>
<td>1254004</td>
</tr>
<!-- 偶数行 -->
<tr class="altrow">
<td>dovecho</td>
<td>W19</td>
<td>Dec 9th</td>
<td>Sagittarius</td>
<td>1892013</td>
</tr>
<!-- 奇数行 -->
<tr>
<td>shanghen</td>
<td>W42</td>
<td>May 24th</td>
<td>Gemini</td>
<td>1544254</td>
</tr>
<!-- 偶数行 -->
<tr class="altrow">
<td>venessawj</td>
<td>W45</td>
<td>Apr 1st</td>
<td>Aries</td>
<td>1523753</td>
</tr>
<!-- 奇数行 -->
<tr>
<td>lightyear</td>
<td>W311</td>
<td>Mar 23th</td>
<td>Aries</td>
<td>1002908</td>
</tr>
</table>
</body>
</html>
实现表格隔行变色的效果，这里分别采用原生 JavaScript 和封装好的 JQuery 来实现：
- JavaScript
<script>
window.onload = function() {
var tr = document.getElementsByTagName("tr");
for (var i = 0;i < tr.length;i++) {
if (i % 2 === 0) {
tr[i].style.backgroundColor = "red";
} else {
tr[i].style.backgroundColor = "green";
}
}
}
</script>
- JQuery
<script src="jquery/jquery-3.5.1.js"></script>
<script>
$(function () {
$("tr:odd").css("background-color", "red");
$("tr:even").css("background-color", "green");
})
</script>
当然，JQuery 也可使用 CDN 引入：
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
从上可以看出，使用封装好的 JQuery 代码量更加少，毕竟 JQuery 的宗旨是：使用更少的代码，做更多的事。 并且使用 JQuery 的页面加载速度要快于 JavaScript，使用两种方式实现隔行变色的效果时，分别刷新页面可以看得出来其加载速度区别。
以上都是动态实现效果，当然使用静态的 css 样式也能实现该效果：
<style>
tr:nth-of-type(even){
background-color: green;
}
tr:nth-of-type(odd){
background-color: red;
}
</style>