代碼:::
<!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>