表格隔行变色
方法1：CSS：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格隔行变色--CSS实现隔行变色</title>
<style>
.datalist{border: 1px solid #007108;font-family: arial; border-collapse: collapse; background-color: #d9ffdc;/*表格背景色*/font-size: 14px;}
.datalist tr th{background-color:#72E67B;border: 1px solid #007108;}
.datalist tr td{border: 1px solid #007108;}
.datalist tr.altrow{background-color: #a5e5aa;/*隔行变色*/}
</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">Consteliation</th>
<th scope="col">Mobile</th>
</tr>
<tr> <!--//奇数行-->
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>11180</td>
</tr>
<tr class="altrow"> <!--//偶数行-->
<td>liqong</td>
<td>W14</td>
<td>Dec 24th</td>
<td>Cancer</td>
<td>11182</td>
</tr>
<tr> <!--//奇数行-->
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>11180</td>
</tr>
<tr class="altrow"> <!--//偶数行-->
<td>liqong</td>
<td>W14</td>
<td>Dec 24th</td>
<td>Cancer</td>
<td>11182</td>
</tr>
<tr> <!--//奇数行-->
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>11180</td>
</tr>
<tr class="altrow"> <!--//偶数行-->
<td>liqong</td>
<td>W14</td>
<td>Dec 24th</td>
<td>Cancer</td>
<td>11182</td>
</tr>
</table>
</body>
</html>
方法2：javascript：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格隔行变色javaScript.html</title>
<style>
.datalist{border: 1px solid #007108;font-family: arial; border-collapse: collapse; background-color: #d9ffdc;/*表格背景色*/font-size: 14px;}
.datalist tr th{background-color:#72E67B;border: 1px solid #007108;}
.datalist tr td{border: 1px solid #007108;}
.datalist tr.altrow{background-color: #a5e5aa;/*隔行变色*/}
</style>
<script>
window.onload=function(){
var oTable=document.getElementById('oTable');
for(var i=0;i<oTable.rows.length;i++){
if(i%2==0) //偶数行
oTable.rows[i].className='altrow';
}
}
</script>
</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">Consteliation</th>
<th scope="col">Mobile</th>
</tr> <!--不需要手动添加css类别-->
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>11180</td>
</tr>
<tr>
<td>liqong</td>
<td>W14</td>
<td>Dec 24th</td>
<td>Cancer</td>
<td>11182</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>11180</td>
</tr>
<tr>
<td>liqong</td>
<td>W14</td>
<td>Dec 24th</td>
<td>Cancer</td>
<td>11182</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>11180</td>
</tr>
<tr>
<td>liqong</td>
<td>W14</td>
<td>Dec 24th</td>
<td>Cancer</td>
<td>11182</td>
</tr>
</table>
</body>
</html>
方法3：JQuery：
<script type="text/javascript" src="js/jquery-1.12.1.min.js" ></script>
<script>
<script>
$(function(){
$('table.datalist tr:nth-child(odd)').addClass('altrow');//隔行变色
$('td:nth-child(1)').addClass('onece'); //所有表格的第一个单元格，就是第一列
});
</script>
