javascript实现Email邮件显示与删除功能_javascript技巧

php中文网

发布时间：2016-05-16 15:30:49

1881人浏览过

来源于php中文网

原创

一、主要介绍：
这题采用之前的技术，根据table的rows属性，获得数组，然后对数组设置样式，所以颜色就出来了。

1）.全选复选框，通过var nodess=document.getelementsbyname("mail");

for(var x=0;x

复选框函数进行

2）.按钮全选，反选，和取消全选，可以用一个函数写，传入不同的参数AllBybtn(num）类型即可

函数里面根据js的特性非0 和 0 这两种状态，进行设置，为了同步，需要分别进行设置

3）.为了显示出当全部选中就默认全选的复选框选中，所以需要对每一个复选框进行设置，采用函数checkBysingle()进行设置

立即学习“Java免费学习笔记（深入）”；

4）.删除所选项是需要主要，当前的是checkbox对象，上一级是td--tr--先拿到tr对象，然后对通过tr的父节点删除tr对象再删除之后，x会变化，可能有些删不到，所以需要将X的值还原，或者从后面开始删除。

2、样式设置：

三、背景颜色以及鼠标移动的事件设置

  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

五、按钮的全选

FaceSwapper

FaceSwapper是一款AI在线换脸工具，可以让用户在照片和视频中无缝交换面孔。

下载

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

六、所有项目都选中之后全选自动选中

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=0;x--){ 
      if(tdnode[x].checked){//对象是 checkbox 我们必须要那父级的父级 《tr》，我们需要移除的就是tr对象 
       var trnode=tdnode[x].parentNode.parentNode;//tr对象 
       trnode.parentNode.removeChild(trnode);//table对象移除tr对象 
    } 
    loading();//调用颜色的设置 
  } 
}

现象一：

反选效果：

删除前：

删除后：

完整代码：

 
 
  
   
  Mail.html 
     
        
  
  
  
   
      全选  发件人  邮件标题  邮件附属信息 
       张三  国庆祝福  邮件附属信息1.... 
       Jack  假期堵车  邮件附属信息2.... 
       Jack  假期堵车  邮件附属信息3.... 
       Jack  假期堵车  邮件附属信息4.... 
       Jack  假期堵车  邮件附属信息5.... 
       Tom  一些广告  邮件附属信息6.... 
       Tom  一些广告  邮件附属信息6.... 
       Tom  一些广告  邮件附属信息6.... 
       Tom  一些广告  邮件附属信息6.... 
    全选

全选	发件人	邮件标题	邮件附属信息
	张三	国庆祝福	邮件附属信息1....
	Jack	假期堵车	邮件附属信息2....
	Jack	假期堵车	邮件附属信息3....
	Jack	假期堵车	邮件附属信息4....
	Jack	假期堵车	邮件附属信息5....
	Tom	一些广告	邮件附属信息6....
	Tom	一些广告	邮件附属信息6....
	Tom	一些广告	邮件附属信息6....
	Tom	一些广告	邮件附属信息6....
全选