javaScript双色表格

 代码实现

<script src="js/jquery-1.12.4.js"></script>
<script>
  $(function(){
    $('tr:first').addClass('tableHeader')
    $('tr:even:not(:first)').addClass('evenStyle')
    $('tr:not(:first)').mouseover(function(){
      $(this).addClass('over')
    }).mouseout(function(){
      $(this).removeClass('over')
    })
  })
</script>

h1{
	color:#063;
	font-weight:bold;
	font-family:"黑体";
	text-align:center;
}
.datalist{
	border:1px solid #007108;
	background-color:#d9ffdc;/*单数行背景色*/
	font-size:14px;
	border-collapse:collapse;
	width:800px;
	margin:0px auto;
}
.datalist td{
	border:1px solid #007108;
	text-align:center;
	line-height:20px;
	padding:4px 10px;
}
.tableHeader{
	background:#00a40c;/*表头背景色*/
	color:#FFF;
	font-weight:bold;
}
.evenStyle{
	background-color:#a5e5aa;/*偶数行背景色*/
}
.over{
	background-color:#ff9;
}
​