（13）邮箱列表全选、反选、删除

最新推荐文章于 2023-08-04 17:42:43 发布

FixedStarHaHa

最新推荐文章于 2023-08-04 17:42:43 发布

阅读量938

点赞数

分类专栏： DOM

本文链接：https://blog.csdn.net/jiangshangchunjiezi/article/details/76899156

版权

DOM 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

这是对之前的全选商品列表的checked、行间隔颜色显示和高亮显示的综合练习也涉及到了table中删除一行如何操作（父删子）尤其对checkAllByBut(num)让不同类似操作在同一个方法实现技巧好好理解

table
{
    border:#000 1px solid;
    width:500px;
    border-collapse:collapse;
}

table td
{
    border:#39F 1px solid;
    padding:5px;
}
table th
{
    border:#39F 1px solid;
    padding:5px;
    background-color:#999;

}

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="邮箱table.css"/>
<style type="text/css">
   .one
   {
       background-color:#FF9;
   }
   .two
   {
       background-color:#CF3;
   }

   .over
   {
       background-color:#F00;
   }


</style>
    <script type="text/javascript">
       //行颜色间隔显示功能
       var name;
       function trColor()
       {
           //获取表格对象
           var TabNode=document.getElementById("tabid");

           //获取行集合
           var CollTrNodes=TabNode.rows;

           //遍历行集合并赋颜色
           for(var i=1;i<CollTrNodes.length-1;i++)
           {
               if(i%2==0)
               {
                   CollTrNodes[i].className="one";
               }
               else
               {
                  CollTrNodes[i].className="two";  
               }

               //因为所有行高亮的事件是相同的，且较多，所以可以在网页网页加载完后就注册事件及处理方式
               //注意只有事件触发才会类名改变，这里只是提供解决方式
               CollTrNodes[i].onmouseover=function()
               {
                   name=this.className;//onmouseout方法需要类名
                   this.className="over"; 
               }
               CollTrNodes[i].onmouseout=function ()
               {
                   this.className=name;//类名不会混乱，因为在over中有this
               }


           }   

        }
    function checkAllByBut(num)
    {
        //无论全选，取消全选，或者反选，都是对行集合进行遍历过程中都checked进行操作
        //可以通过传参不同而进行不同的操作

        var CollMailNodes=document.getElementsByName("mail");//注意这里取的是mail集合
        for(var i=0;i<CollMailNodes.length;i++)//注意是对所以元素
        {
            if(num==2)
            {
                CollMailNodes[i].checked=!CollMailNodes[i].checked;//反选简洁写法

            }
            else 
            {

                CollMailNodes[i].checked=num;//因为在js中，0就是false，非0就是true

            }

        }
    }

    function deleteMail()
    {
        //应该有个健壮性判断，因为用户可能误点击，所以要判断下用window对象下的confirm方法
        if(window.confirm("确定要删除所选的邮件吗？"))
        {
            var CollMailNodes=document.getElementsByName("mail");//注意这里取的是mail集合
            for(var i=0;i<CollMailNodes.length;i++)//注意是对所以元素
            {
                if(CollMailNodes[i].checked)
                {
                    //获取要删除的行
                    var deleTr=CollMailNodes[i].parentNode.parentNode;

                    //获取table，用父节点删除子节点的的方法进行删除

                    deleTr.parentNode.removeChild(deleTr);

                    //注意删除此行后，行集合的长度-1，并且其后的角标会-1，所以i--
                    i--;//删除的关键 
                }
            }
        //因为行间隔显示颜色，所以删完后，还要满足这个要求，调用trColor()方法即可
        trColor();  
        }   





    }
    onload=function ()
    {
        trColor();
    }
    </script>
</head>

<body>
   <table id="tabid">
     <tr>
        <th><input type="checkbox" name="all" onclick=""/>全选</th>
        <th>发件人</th>
        <th>邮件名称</th>
        <th>邮件附属信息</th>
     </tr>

     <tr >
        <td><input type="checkbox" name="mail"/>
        <td>张三11</td>
        <td>我是邮件11</td>
        <td>我是附属信息11</td>

     </tr>

     <tr>
        <td><input type="checkbox" name="mail"/></td>
        <td>张三22</td>
        <td>我是邮件22</td>
        <td>我是附属信息22</td>

     </tr>

     <tr>
        <td><input type="checkbox" name="mail"/></td>
        <td>张三33</td>
        <td>我是邮件33</td>
        <td>我是附属信息33</td>

     </tr>


     <tr>
        <td><input type="checkbox" name="mail"/></td>
        <td>张三44</td>
        <td>我是邮件44</td>
        <td>我是附属信息44</td>

     </tr>

     <tr >
        <td><input type="checkbox" name="mail"/></td>
        <td>张三55</td>
        <td>我是邮件55</td>
        <td>我是附属信息55</td>

     </tr>

     <tr>
        <td><input type="checkbox" name="mail"/></td>
        <td>张三66</td>
        <td>我是邮件66</td>
        <td>我是附属信息66</td>

     </tr>

     <tr>
        <td><input type="checkbox" name="mail"/></td>
        <td>张三77</td>
        <td>我是邮件77</td>
        <td>我是附属信息77</td>

     </tr>

     <tr>
        <td><input type="checkbox" name="mail"/></td>
        <td>张三88</td>
        <td>我是邮件88</td>
        <td>我是附属信息88</td> 
     </tr>

     <tr>
        <th><input type="checkbox" name="all" onclick="checkAll(this)"/>全选</th>
        <th colspan="3">
            <input type="button" value="全选" onclick="checkAllByBut(1)"/>
            <input type="button" value="取消全选" onclick="checkAllByBut(0)"/>
            <input type="button" value="反选" onclick="checkAllByBut(2)"/>
            <input type="button" value="删除所选附件" onclick="deleteMail()"/>

        </th>
     </tr>
   </table>

</body>
</html>

这里写图片描述

FixedStarHaHa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（13）邮箱列表全选、反选、删除

这是对之前的全选商品列表的checked、行间隔颜色显示和高亮显示的综合练习也涉及到了table中删除一行如何操作（父删子）尤其对checkAllByBut(num)让不同类似操作在同一个方法实现技巧好好理解
复制链接

扫一扫

专栏目录