css实现表格隔行变色：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#data{
border-collapse: collapse;
}
#data td{
border:1px solid #000;
width:150px;
text-align:center;
}
#data tr:nth-child(odd){
background:#e8e8e8;
}
</style>
</head>
<body>
<table id="data">
<tr>
<td>序号</td>
<td>姓名</td>
</tr>
<tr>
<td>1</td>
<td>lorem</td>
</tr>
<tr>
<td>2</td>
<td>sally</td>
</tr>
<tr>
<td>3</td>
<td>lul</td>
</tr>
</table>
</body>
</html>js实现表格隔行变色：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#data{
border-collapse: collapse;
}
#data td{
border:1px solid #000;
width:150px;
text-align:center;
}
</style>
</head>
<body>
<table id="data">
<tr>
<td>序号</td>
<td>姓名</td>
</tr>
<tr>
<td>1</td>
<td>lorem</td>
</tr>
<tr>
<td>2</td>
<td>sally</td>
</tr>
<tr>
<td>3</td>
<td>lul</td>
</tr>
</table>
<script>
var trs=data.querySelectorAll("table tr");
for(var i=0;i<trs.length;i++){
if(i%2==0){
trs[i].style.background="#e8e8e8";
}
}
</script>
</body>
</html><style>
#data{
border-collapse: collapse;
}
#data td{
border:1px solid #000;
width:150px;
text-align:center;
}
.bg{
background:#e8e8e8;
}
</style>
</head>
<body>
<table id="data">
<tr>
<td>序号</td>
<td>姓名</td>
</tr>
<tr>
<td>1</td>
<td>lorem</td>
</tr>
<tr>
<td>2</td>
<td>sally</td>
</tr>
<tr>
<td>3</td>
<td>lul</td>
</tr>
</table>
<script>
var trs=data.querySelectorAll("table tr");
for(var i=0;i<trs.length;i++){
i%2==0&&(trs[i].className="bg");
}
</script>
</body>