隔行变色，高亮显示

隔行变色，高行显示

CSS部分

	#box {
		margin: 100px auto;
		width: 400px;
		height: 200px;
	}
	table {
		border-collapse: collapse;
		border: 1px solid #ccc;
	}
	table thead th{
		width: 400px;
		height: 40px;
		font: 16px/40px "simsun";
		text-align: center;
		background-color: #06F;
		color: #fff;
		border-left: 1px solid #ccc;
	}
	table tbody tr {
		height: 37px;
		width:400px;
		font: 15px/37px "simsun";
		text-align: center;
		border-top: 1px solid #ccc;
		cursor: pointer;
	}
	table tbody tr td{
		border: 1px solid #ccc;
	}

body部分

<div id="box">
	<table>
		<thead>
			<tr>
				<th>姓名</th>
				<th>语文</th>
				<th>数学</th>
				<th>英语</th>
			</tr>
		</thead>
		<tbody id="tbody">
			<tr>
				<td>张三</td>
				<td>90</td>
				<td>98</td>
				<td>90</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>92</td>
				<td>99</td>
				<td>88</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>91</td>
				<td>94</td>
				<td>92</td>
			</tr>
			<tr>
				<td>赵六</td>
				<td>90</td>
				<td>92</td>
				<td>94</td>
			</tr>
		</tbody>
	</table>
</div>

JavaScript部分

var tbody = documentById("tbody");
var trArr = tbody.getElementsByTagName("tr");
for(var i=0; i<trArr.length; i++){
	if(i%2 !==0){
		trArr[i].style.backgroundColor = "#eee";
	}else{
		trArr[i].style.backgroundColor = "#aaa";
	}
	var color = "";
	trArr[i].onmouseover = function(){
		color = this.style.backgroundColor;
		this.style.backgroundColor = "#fff";
	}
	trArr[i].onmouseout = function(){
		this.style.backgroundColor = color;
	}
}