表格的隔行变色实现的方法也有多种,可以用CSS的选择器来实现,比如
:nth-of-type(odd){}/*奇数行*/
:nth-of-type(even){}/*偶数行*/
同样运用css背景的方法也可以实现。当然了,利用js做的表格隔行变色是比较好的做法,因为兼容好。也不废话了,上代码
<table>
<th>
<td>ID</td>
<td>Name</td>
<td>Age</td>
</th>
<tr>
<td>0</td>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>1</td>
<td>李四</td>
<td>20</td>
</tr>
<table>
htm结构如上面;js如下
<script>
var tab=document.getElementsByTagName("table")[0];
//js获取表格的tbody和tr,td也可以用getElementsByTagName来获取
//但是我们有更加简便的方法来获取
var oldBgColor="";
//用来记录移入时表格行的background
for(var i=0;i<tab.tBodies[0].rows.length;i++){
tab.tBodies[0].rows[i].style.background=i%2?"red":"orange";
tab.tBodies[0].rows[i].onmouseover=function(){
oldBgColor=this.style.background;
this.style.background="yellow";
}
tab.tBodies[0].rows[i].onmouseout=function(){
this.style.background=oldBgColor;
}
}
</script>
js内置tBodies,rows,cells这些获取表格的简便操作。如有错误,欢迎纠正,互励共勉。