代码:::
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js实现表格隔行变色效果</title>
<style>
.top{
background-color:#F93;
color:#30C;}
table{
border:1px #000 dashed;
border-collapse:collapse;
}
td,th{
border:#000 1px solid;
text-align:center;}
.one{
background-color:#066;
}
.two{
background-color:#9F9;
}
.over{
background-color:#6CF;}
</style>
<script language="javascript">
function geHang(){
//获取所有的tr
var trlist=document.getElementsByTagName("tr");
//判断从第二个tr起到倒数第二个tr的tr标签,因为获取tr的对象数组是从下标是从0开始的所以第二就是下表为1的tr标签倒数第二tr也就是trlist.length-1.
for(var i=1;i<trlist.length-1;i++){
//对对象的下标i判断,是偶数用className为one,else则为two,one和two是两种不同的属性
if(i%2==0){
trlist[i].className="one";
}else{
trlist[i].className="two";
}
//此处是鼠标放上去和移开是的一个效果,也是通过改变tr的className实现的
//先将鼠标一上去的那个tr的本身的颜色保存下来,以便移走后改回来原来颜色用
var oldcolor;
//给每个tr加上onmouseover事件(鼠标放上去触发)
trlist[i].οnmοuseοver=function(){
//当鼠标放上去是先将本身的class属性给了oldcolr。
oldcolor=this.className;
//然后将自己的className改为over,引用over的属性,this指的是鼠标放上去的那个tr对象。
this.className="over";
}
//给每个tr加上onmouseout事件(鼠标离开时触发)
trlist[i].οnmοuseοut=function(){
//当鼠标离开时将原来的className改回来,继续用原来的className属性
this.className=oldcolor;
}
}
}
</script>
</head>
<body οnlοad="geHang()">
<table width="621" align="center">
<tr class="top">
<th width="105"><A href="javascript:selectAll('qx')" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" type=all>全选</A></th>
<th width="111">发件人</th>
<th width="128">邮件名称</th>
<th width="249">邮件附属信心</th>
</tr>
<tr>
<td><input type="checkbox" name="idlist[]" value="<{$products[record].id}>"></td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="idlist[]" value="<{$products[record].id}>"></td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="idlist[]" value="<{$products[record].id}>"></td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="idlist[]" value="<{$products[record].id}>"></td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="idlist[]" value="<{$products[record].id}>"></td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="idlist[]" value="<{$products[record].id}>"></td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="top">
<td><A href="javascript:selectAll('qx')" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" type=all>全选</A></td>
<td colspan="3">
<A href="javascript:selectAll('qx')" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" type=all>全选</A> -
<A href="javascript:selectAll('fx')" target="_blank" rel="external nofollow" type=reverse>反选</A> -
<A href="javascript:selectAll('qbx')" target="_blank" rel="external nofollow" type=no>全不选</A> -
<INPUT class="Btn BtnNml" hideFocus type=button value="删除所选附件" outClass="Btn BtnNml ImpBtn" overClass="Btn BtnHv ImpBtn" action="move" onClick="del('./delGoods.php');" />
</td>
</tr>
</table>
<!--全选反选和全不选就是传过去一个type值,根据type的值将idlist[]复选框的状态改掉就可以了-->
<script language="javascript">
function selectAll(type)
{
var arrObj=document.getElementsByName("idlist[]");
if(type=="qx"){
for(var i=0; i<arrObj.length; i++){
arrObj[i].checked=true;
}
} else if(type=="qbx"){
for(var i=0; i<arrObj.length; i++){
arrObj[i].checked=false;
}
} else if(type=="fx"){
for(var i=0; i<arrObj.length; i++){
if(arrObj[i].checked==false){
arrObj[i].checked=true;
} else{
arrObj[i].checked=false;
}
}
}
}
</script>
</body>
</html>