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


Posted in Javascript onNovember 21, 2015

一、主要介绍:
这题采用之前的技术,根据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的值还原,或者从后面开始删除。

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

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();//调用颜色的设置 
  } 
}

现象一:

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

反选效果:

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

删除前:

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

删除后:

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

完整代码:

<!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程序设计有所帮助。

Javascript 相关文章推荐
Add a Table to a Word Document
Jun 15 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
JavaScript实现标题栏文字轮播效果代码
Oct 24 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
vue.js实现的绑定class操作示例
Jul 06 Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 Javascript
d3绘制基本的柱形图的实现代码
Dec 12 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 Javascript
javascript随机变色实例代码
Oct 15 Javascript
详解Webpack4多页应用打包方案
Jul 16 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 #Javascript
Jquery ajax基础教程
Nov 20 #Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 #Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 #Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 #Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 #Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 #Javascript
You might like
最小化数据传输――在客户端存储数据
2006/10/09 PHP
php 删除数组元素
2009/01/16 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
Mootools 1.2教程 事件处理
2009/09/15 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
详解python中eval函数的作用
2019/10/22 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
C++面试题目
2013/06/25 面试题
青年文明号复核材料
2014/02/11 职场文书
电子信息工程专业推荐信
2014/02/14 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
新年晚会开场白
2015/05/29 职场文书
实施意见格式范本
2015/06/05 职场文书
中学语文教学反思
2016/02/16 职场文书
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL
全面盘点MySQL中的那些重要日志文件
2021/11/27 MySQL
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL
alibaba seata服务端具体实现
2022/02/24 Java/Android