天天看點

js實作表格隔行變色,滑鼠在該行放上移走的變色效果,還有全選,反選等

代碼:::

<!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>&nbsp;-&nbsp;

<A href="javascript:selectAll('fx')" target="_blank" rel="external nofollow" type=reverse>反選</A>&nbsp;-&nbsp;

<A href="javascript:selectAll('qbx')" target="_blank" rel="external nofollow" type=no>全不選</A>&nbsp;-&nbsp;

 <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>

繼續閱讀