javascript實作Email郵件顯示與刪除功能_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

javascript實作Email郵件顯示與刪除功能_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:30 PM

一、主要介紹：
這題採用之前的技術，依照table的rows屬性，取得數組，然後對數組設定樣式，所以顏色就出來了。

1）.全選複選框，透過var nodess=document.getElementsByName("mail");

for(var x=0;x<nodess.length;x++){

nodess[x].checked=nodes.checked;

}

複選框函數進行

2）.按鈕全選，反選，和取消全選，可以用一個函數寫，傳入不同的參數AllBybtn(num）類型即可

函數裡面根據js的特性非0 和 0 這兩種狀態，進行設置，為了同步，需要分別進行設定

3）.為了顯示出當全部選中就默認全選的複選框選中，所以需要對每一個複選框進行設置，採用函數checkBysingle()進行設置

4）.刪除所選項是需要主要，當前的是checkbox對象，上一級是td--tr--先拿到tr對象，然後對通過tr的父節點刪除tr物件再刪除之後，x會變化，可能有些刪不到，所以需要將X的值還原，或從後面開始刪除。

2、樣式設定：

<style type="text/css"> 
      .one{ 
        background-color:#00ff80; 
      } 
      .two{ 
        background-color:#80ff00; 
      } 
      .three{ 
        background-color:#0000ff; 
      } 
      table th{ 
        background-color:#c0c0c0; 
      } 
      table{ 
        width:400px; 
        border:solid 1px; 
      } 
      table tr{ 
        height:50px; 
      } 
    </style>

三、背景顏色、滑鼠移動的事件設定

  function toaddcolor(){ 
          //颜色设置， 
          var nodes = document.getElementById("tabid"); 
          var rows1 = nodes.rows; 
          for (var x = 1; x < rows1.length; x++) { 
            if (x % 2 == 0) { 
              rows1[x].className = "one"; 
            } 
            else { 
              rows1[x].className = "two"; 
            } 
          } 
        } 
          function addEvent(){ 
            var name; 
            //当鼠标移上去之后发生相应的变化 
            var nodes=document.getElementById("tabid"); 
            var rows1=nodes.rows; 
            for (var x = 1; x < rows1.length; x++) { 
            rows1[x].onmouseover = function(){ 
              name = this.className; 
              this.className = "three"; 
            } 
            rows1[x].onmouseout = function(){ 
              this.className = name; 
            } 
             
//             alert("bb"); 
//             alert(rows1[x].getElementsByTagName("input")[0].nodeName); 
            rows1[x].getElementsByTagName("input")[0].onclick=function(){//每一行的input对象 
              document.getElementsByName("allItem")[0].indeterminate=true;//让全选的复选框形状发生变化 
            } 
          } 
        } 
        onload=function(){//在网页加载时候调用 
          toaddcolor(); 
          addEvent(); 
        }

四、複選框的全選

function allcheck(nodes){//全选checkbox的点击调用这个 
          var nodess=document.getElementsByName("mail"); 
          for(var x=0;x<nodess.length;x++){ 
            nodess[x].checked=nodes.checked; 
          } 
          //多个全选的时候，必须和其他的一个一样 
          var nodes1=document.getElementsByName("allItem"); 
          for(var x=0;x<nodes1.length;x++){ 
            nodes1[x].checked=nodes.checked; 
          } 
        }

五、按鈕的全選

function AllBybtn(num){//全选按钮设置 
          var nodess = document.getElementsByName("mail"); 
          /*多重for 循环不太好，可以根据js里面的特性0  非0 
           for (var x = 0; x < nodess.length; x++) { 
            if (num == 1) { 
              nodess[x].checked = 1; 
            }else if (num == 2) { 
                nodess[x].checked = !nodess[x].checked; 
              }else if (num == 3) { 
                  nodess[x].checked = false; 
                } 
          }*/ 
          for(var x=0;x<nodess.length;x++){ 
            if(num<2){ 
              nodess[x].checked=num; 
                //让全选的复选框可以 单独写个函数 
                var all=document.getElementsByName("allItem"); 
                for(var y=0;y<all.length;y++){ 
                  if(num==1){ 
                  all[y].checked=num; 
                }else{ 
                  all[y].checked=num; 
                } 
              } 
            }else{ 
              nodess[x].checked=!nodess[x].checked; 
              var all=document.getElementsByName("allItem"); 
                for (var y = 0; y < all.length; y++) { 
                  all[y].checked=0; 
                }}}}

六、所有項目都選取之後全選自動選取

function checkBysingle(){//全部入选之后，全选的自动选中      
          var flag = true; 
          var node = document.getElementsByName("mail"); 
          for (var x = 0; x < node.length; x++) { 
            if (node[x].checked == false) { 
              flag = false; 
              break; 
            } 
          } 
           
          var all = document.getElementsByName("allItem"); 
          for (var y = 0; y < all.length; y++) { 
            if (flag) { 
              all[y].checked = true; 
            } 
            else { 
              all[y].checked = false; 
            }}}

七、刪除郵件的函數（刪除行）

function DelBybtn(){//删除行 
  var tdnode=document.getElementsByName("mail"); 
    /*for(var x=0;x<tdnode.length;x++){ 
    if(tdnode[x].checked){//对象是 checkbox 我们必须要那父级的父级 《tr》，我们需要移除的就是tr对象 
       var trnode=tdnode[x].parentNode.parentNode;//tr对象 
       trnode.parentNode.removeChild(trnode);//table对象移除tr对象 
    // alert("aa"); 
    //节点容器跟Java当中的集合一样，只要是remove()，长度就会变的。这里，需要进行x的复位 
      x--; 
    }*/ 
    for(var x=tdnode.length-1;x>=0;x--){ 
      if(tdnode[x].checked){//对象是 checkbox 我们必须要那父级的父级 《tr》，我们需要移除的就是tr对象 
       var trnode=tdnode[x].parentNode.parentNode;//tr对象 
       trnode.parentNode.removeChild(trnode);//table对象移除tr对象 
    } 
    loading();//调用颜色的设置 
  } 
}

現像一：

反選效果：

刪除前：

刪除後：

完整程式碼：

<!DOCTYPE html> 
<html> 
 <head> 
  <!-- 
    这题采用之前的技术，根据table的rows属性，获得数组，然后对数组设置样式，所以颜色就出来了 
    1，全选复选框，通过var nodess=document.getElementsByName("mail"); 
          for(var x=0;x<nodess.length;x++){ 
            nodess[x].checked=nodes.checked; 
          } 
    复选框函数进行 
    2，按钮全选，反选，和取消全选，可以用一个函数写，传入不同的参数AllBybtn(num）类型即可 
    函数里面 根据js的特性 非0 和 0 这两种状态，进行设置，为了同步，需要分别进行设置 
    3，为了显示出当全部选中就默认全选的复选框选中，所以需要对每一个复选框进行设置，采用函数checkBysingle()进行设置 
    4,删除所选项是需要主要，当前的是checkbox对象，上一级是td--tr--先拿到tr对象，然后对通过tr的父节点删除tr对象 
      再删除之后，x会变化，可能有些删不到，所以需要将X的值还原，或者从后面开始删除 
  --> 
  <title>Mail.html</title> 
    <style type="text/css"> 
      .one{ 
        background-color:#00ff80; 
      } 
      .two{ 
        background-color:#80ff00; 
      } 
      .three{ 
        background-color:#0000ff; 
      } 
      table th{ 
        background-color:#c0c0c0; 
      } 
      table{ 
        width:400px; 
        border:solid 1px; 
      } 
      table tr{ 
        height:50px; 
      } 
    </style> 
    <script type="text/javascript"> 
        var name; 
        function toaddcolor(){ 
          //颜色设置， 
          var nodes = document.getElementById("tabid"); 
          var rows1 = nodes.rows; 
          for (var x = 1; x < rows1.length; x++) { 
            if (x % 2 == 0) { 
              rows1[x].className = "one"; 
            } 
            else { 
              rows1[x].className = "two"; 
            } 
          } 
        } 
          function addEvent(){ 
            var name; 
            //当鼠标移上去之后发生相应的变化 
            var nodes=document.getElementById("tabid"); 
            var rows1=nodes.rows; 
            for (var x = 1; x < rows1.length; x++) { 
            rows1[x].onmouseover = function(){ 
              name = this.className; 
              this.className = "three"; 
            } 
            rows1[x].onmouseout = function(){ 
              this.className = name; 
            } 
             
//             alert("bb"); 
//             alert(rows1[x].getElementsByTagName("input")[0].nodeName); 
            rows1[x].getElementsByTagName("input")[0].onclick=function(){//每一行的input对象 
              document.getElementsByName("allItem")[0].indeterminate=true;//让全选的复选框形状发生变化 
            } 
          } 
        } 
        onload=function(){//在网页加载时候调用 
          toaddcolor(); 
          addEvent(); 
        } 
        function allcheck(nodes){//全选checkbox的点击调用这个 
          var nodess=document.getElementsByName("mail"); 
          for(var x=0;x<nodess.length;x++){ 
            nodess[x].checked=nodes.checked; 
          } 
          //多个全选的时候，必须和其他的一个一样 
          var nodes1=document.getElementsByName("allItem"); 
          for(var x=0;x<nodes1.length;x++){ 
            nodes1[x].checked=nodes.checked; 
          } 
        } 
        function AllBybtn(num){//全选按钮设置 
          var nodess = document.getElementsByName("mail"); 
          /*多重for 循环不太好，可以根据js里面的特性0  非0 
           for (var x = 0; x < nodess.length; x++) { 
            if (num == 1) { 
              nodess[x].checked = 1; 
            }else if (num == 2) { 
                nodess[x].checked = !nodess[x].checked; 
              }else if (num == 3) { 
                  nodess[x].checked = false; 
                } 
          }*/ 
          for(var x=0;x<nodess.length;x++){ 
            if(num<2){ 
              nodess[x].checked=num; 
                //让全选的复选框可以 单独写个函数 
                var all=document.getElementsByName("allItem"); 
                for(var y=0;y<all.length;y++){ 
                  if(num==1){ 
                  all[y].checked=num; 
                }else{ 
                  all[y].checked=num; 
                } 
              } 
            }else{ 
              nodess[x].checked=!nodess[x].checked; 
              var all=document.getElementsByName("allItem"); 
                for (var y = 0; y < all.length; y++) { 
                  all[y].checked=0; 
                } 
            } 
          } 
        } 
         
        function checkBysingle(){//全部入选之后，全选的自动选中 
          var flag = true; 
          var node = document.getElementsByName("mail"); 
          for (var x = 0; x < node.length; x++) { 
            if (node[x].checked == false) { 
              flag = false; 
              break; 
            } 
          } 
           
          var all = document.getElementsByName("allItem"); 
          for (var y = 0; y < all.length; y++) { 
            if (flag) { 
              all[y].checked = true; 
            } 
            else { 
              all[y].checked = false; 
            }}} 
       
      function DelBybtn(){//删除行 
        var tdnode=document.getElementsByName("mail"); 
          /*for(var x=0;x<tdnode.length;x++){ 
          if(tdnode[x].checked){//对象是 checkbox 我们必须要那父级的父级 《tr》，我们需要移除的就是tr对象 
             var trnode=tdnode[x].parentNode.parentNode;//tr对象 
             trnode.parentNode.removeChild(trnode);//table对象移除tr对象 
          // alert("aa"); 
          //节点容器跟Java当中的集合一样，只要是remove()，长度就会变的。这里，需要进行x的复位 
            x--; 
          }*/ 
           
          for(var x=tdnode.length-1;x>=0;x--){ 
            if(tdnode[x].checked){//对象是 checkbox 我们必须要那父级的父级 《tr》，我们需要移除的就是tr对象 
             var trnode=tdnode[x].parentNode.parentNode;//tr对象 
             trnode.parentNode.removeChild(trnode);//table对象移除tr对象 
          } 
          toaddcolor(); 
          addEvent(); 
        } 
      } 
    </script>    
 </head> 
  
 <body> 
  <table id="tabid"> 
    <tr> <th><input type="checkbox" name="allItem" onclick="allcheck(this)"/> 全选 </th> <th>发件人</th> <th>邮件标题</th> <th>邮件附属信息</th></tr> 
    <tr> <td><input type="checkbox" name="mail" onclick="checkBysingle(this)" /> </td> <td>张三</td> <td>国庆祝福</td> <td>邮件附属信息1....</td></tr> 
    <tr> <td><input type="checkbox" name="mail" onclick="checkBysingle(this)" /> </td> <td>Jack</td> <td>假期堵车</td> <td>邮件附属信息2....</td></tr> 
    <tr> <td><input type="checkbox" name="mail" onclick="checkBysingle(this)" /> </td> <td>Jack</td> <td>假期堵车</td> <td>邮件附属信息3....</td></tr> 
    <tr> <td><input type="checkbox" name="mail" onclick="checkBysingle(this)" /> </td> <td>Jack</td> <td>假期堵车</td> <td>邮件附属信息4....</td></tr> 
    <tr> <td><input type="checkbox" name="mail" onclick="checkBysingle(this)" /> </td> <td>Jack</td> <td>假期堵车</td> <td>邮件附属信息5....</td></tr> 
    <tr> <td><input type="checkbox" name="mail" onclick="checkBysingle(this)" /> </td> <td>Tom</td> <td>一些广告</td> <td>邮件附属信息6....</td></tr> 
    <tr> <td><input type="checkbox" name="mail" onclick="checkBysingle(this)" /> </td> <td>Tom</td> <td>一些广告</td> <td>邮件附属信息6....</td></tr> 
    <tr> <td><input type="checkbox" name="mail" onclick="checkBysingle(this)" /> </td> <td>Tom</td> <td>一些广告</td> <td>邮件附属信息6....</td></tr> 
    <tr> <td><input type="checkbox" name="mail" onclick="checkBysingle(this)" /> </td> <td>Tom</td> <td>一些广告</td> <td>邮件附属信息6....</td></tr> 
    <tr><td><input type="checkbox"  name="allItem" onclick="allcheck(this)">全选</td> 
      <td colspan=3><input type="button" value="全选" name="btn1" onclick="AllBybtn(1)" /> 
      <input type="button" value="反选" name="btn2" onclick="AllBybtn(2)"/> 
      <input type="button" value="取消全选" name="btn3" onclick="AllBybtn(0)"/> 
      <input type="button" value="删除所选项" name="btn4" onclick="DelBybtn()"/> 
       
       
      </td> 
    </tr> 
  </table> 
 </body> 
</html>

希望本文所述對大家學習javascript程式設計有所幫助。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。