首頁 > 開發者 > JavaScript

javascript 郵箱管理程式

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GB18030">
        <title>Insert title here</title>
  <script type="text/javascript">

/*

*  javascript 郵箱管理程式

*/

//:

  
 

 onload = function(){
    //通過標籤tr獲得所有的tr
    var trArr = document.getElementsByTagName("tr");
    //然後設定第一個和最後一個tr的背景顏色
    trArr[0].style.background = "#666666";
    trArr[trArr.length - 1].style.background = "#666666";
   
    //通過tbody標籤獲得tbody中所有的tr
    var color = null;
    var arr = document.getElementsByTagName("tbody")[0].rows;
    for(var x = 0; x < arr.length; x++){
     //迴圈遍曆tr,為每個tr設定背景顏色,奇數行和偶數行設定不同顏色
     arr[x].style.background = x % 2 == 0 ? "#dddddd" : "#bbbbbb";
    
     //滑鼠進入tr時記住tr的顏色, 並且改為白色
     arr[x].onmouseover = function(){
      color = this.style.background;
      this.style.background = "white";
     }
    
     // 滑鼠移出時, 改回記住的顏色
     arr[x].onmouseout = function(){
      this.style.background = color;
     }
    }
   }
  
   //拿到所有複選框,迴圈遍曆,進行判斷
   function changeAll(type){
     var arr = document.getElementsByName("cb"); // 擷取所有的checkbox
     for(var x = 0; x < arr.length; x++){ 
      switch(type){                            // 根據type, 設定每一個checkbox的checked屬性
       //如果選中了thead中的checkbox,則把下面的也設為選中
       case 0:
        arr[x].checked = document.getElementById("first").checked;
        break;
       case 1:
        arr[x].checked = true; //全選,直接設定為true
        break;
       case 2:
        arr[x].checked = !arr[x].checked; //反選,設定為反向
        break;
       case 3:
        arr[x].checked = false; // 取消,設定為false
        break;
      }
     }
    }
  
   //迴圈遍曆tr,如果選中,則拿到父級節點刪除tr
   function del(){
    var arr = document.getElementsByName("cb");  
    for (var x = 0; x < arr.length; x++) {  // 如果哪個被選中, 就刪除哪個checkbox所在的tr
     if(arr[x].checked)
      arr[x].parentNode.parentNode.parentNode.removeChild(arr[x--].parentNode.parentNode);
    }
    formatColor();                           // 重設背景顏色
   }
  
   //格式化顏色
   function formatColor(){
     var arr = document.getElementsByTagName("tbody")[0].rows;
     for(var x = 0; x < arr.length; x++)
      arr[x].style.background = x % 2 == 0 ? "#dddddd" : "#bbbbbb";
   }
  
   //按時間排序,先分割文本,然後填充到時間對象中,進行比較,排序
   var times = 0;
   function sort(){
    var arr = document.getElementsByTagName("tbody")[0].rows;
    for (var i = 0; i < arr.length - 1; i++)
     for (var j = 0; j < arr.length - 1 - i; j++)
      if (times % 2 == 0 ? compare(arr[j], arr[j+1]) :  compare(arr[j + 1], arr[j]))
       arr[j].swapNode(arr[j+1]);
    formatColor();
    times++;
   }
  
   function compare(tr1,tr2){
    var str1 = tr1.cells[3].innerHTML;
    var str2 = tr2.cells[3].innerHTML;
    var arr1 = str1.split("-");
    var arr2 = str2.split("-");
    var date1 = new Date(arr1[0],arr1[1],arr1[2]);
    var date2 = new Date(arr2[0],arr2[1],arr2[2]);
    return date1.getTime() > date2.getTime();
   }
  </script>
    </head>
    <body>
     <!--表單設計-->
     <table border="1" width="70%" align="center" cellpadding="5" cellspacing="0" id="table">
      <thead>
       <tr width="10%">
        <th><input type="checkbox" onclick="changeAll(0)" id="first"></th>
        <th>標 題</th>
        <th>寄件者</th>
        <th><a href="javascript:sort()" style="text-decoration:none">時間</a></th>
       </tr>
      </thead>
  
   <tbody>
    <tr>
     <td align="center"><input type="checkbox" name="cb"></td>
     <td>Tile1</td>
     <td>張三</td>
     <td>2010-6-1</td>
    </tr>
   <tr>
    <td align="center"><input type="checkbox" name="cb"></td>
    <td>Tile2</td>
    <td>李四</td>
    <td>2010-5-5</td>
   </tr>
   <tr>
    <td align="center"><input type="checkbox" name="cb"></td>
    <td>Tile3</td>
    <td>王五</td>
    <td>2010-3-1</td>
   </tr>
   <tr>
    <td align="center"><input type="checkbox" name="cb"></td>
    <td>Tile4</td>
    <td>趙六</td>
    <td>2010-1-15</td>
   </tr>
   <tr>
    <td align="center"><input type="checkbox" name="cb"></td>
    <td>Tile5</td>
    <td>錢七</td>
    <td>2010-1-2</td>
   </tr>
   
   </tbody>
   
   <tfoot>
    <tr align="center">
     <th colspan="4">
      <input type="button" value="全選" onclick="changeAll(1)">
      <input type="button" value="反選" onclick="changeAll(2)">
      <input type="button" value="取消" onclick="changeAll(3)">
      <input type="button" value="刪除" onclick="del()">
     </th>
    </tr>
   </tfoot>
     </table>
    </body>
</html>

 

摘自  代俊建的專欄 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More