<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>原生js实现各行变色</title> ???<style> ???????*{ ???????????margin:0; ???????????padding:0; ???????} ???????#studentCore{ ???????????width:300px; ???????????margin:0 auto; ???????} ???????table{ ???????????border-collapse: collapse; ???????} ???????td,th{ ???????????text-align: center; ???????????padding:3px 5px; ???????????border:1px solid #ccc; ???????} ???????th{ ???????????background-color: lightsteelblue; ???????} ???????.hightLight{ ???????????background-color: pink; ???????} ???</style></head><body onload="setTableColor()"><div id="studentCore"> ???<table> ???????<thead> ???????????<tr> ???????????????<th>Sname</th> ???????????????<th>Score</th> ???????????</tr> ???????</thead> ???????<tbody> ???????????<tr> ???????????????<td>明明</td> ???????????????<td>50</td> ???????????</tr> ???????????<tr> ???????????????<td>静静</td> ???????????????<td>60</td> ???????????</tr> ???????????<tr> ???????????????<td>日日</td> ???????????????<td>65</td> ???????????</tr> ???????????<tr> ???????????????<td>李磊</td> ???????????????<td>70</td> ???????????</tr> ???????????<tr> ???????????????<td>韩梅梅</td> ???????????????<td>75</td> ???????????</tr> ???????????<tr> ???????????????<td>杨幂</td> ???????????????<td>80</td> ???????????</tr> ???????????<tr> ???????????????<td>范冰冰</td> ???????????????<td>85</td> ???????????</tr> ???????</tbody> ???</table></div><script src="js/jquery-3.2.1.min.js"></script><!--方法一--><script> ???var data=document.getElementById("studentCore"); ???var trs=data.querySelectorAll("tbody>tr"); ???console.log(trs); ???for (var i=0;i<trs.length;i++){ ??????i%2!=0&&(trs[i].className="hightLight"); ???}</script><!--方法二--><script> ???function setTableColor() { ???????var data=document.getElementById("studentCore"); ???????var trs=data.getElementsByTagName("tr"); ???????for(var i=0;i<trs.length;i++){ ???????????var j=i+1; ???????????if(j%2==0){ ???????????????trs[i].style.background="pink"; ???????????}else{ ???????????????trs[i].style.background="yellow"; ???????????} ???????} ???} ???setTableColor();</script></body></html>原生js实现table表格的各行变色功能
原文地址：http://www.cnblogs.com/yingleiming/p/7802772.html