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 相关文章推荐
理解JavaScript中的对象 推荐
Jan 09 Javascript
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
详解JSON Web Token 入门教程
Jul 30 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 Javascript
在Vuex中Mutations修改状态操作
Jul 24 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
php抓即时股票信息
2006/10/09 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
Look And Say 序列php实现代码
2011/05/22 PHP
php中adodbzip类实例
2014/12/08 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
js禁止表单重复提交
2017/08/29 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
python与字符编码问题
2019/05/24 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
中药专业大学生医药工作求职信
2013/10/25 职场文书
活动策划邀请函
2014/02/06 职场文书
校园安全教育广播稿
2014/02/17 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
大学生实习证明
2015/06/16 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python
Vue+Flask实现图片传输功能
2022/04/01 Vue.js
vue实现Toast组件轻提示
2022/04/10 Vue.js