首页 > 代码库 > DOM_mail效果

DOM_mail效果

2024-10-20 02:43:02   210人阅读

邮箱效果制作：

步骤：

1、创建html——>table标签以及子标签——>创建功能标签button/checkbox——>对table th td进行css样式设计——>link标签导入css代码

2、功能标签事件触发设计：

　　（1）行颜色间隔：获取table标签——>获取所有行标签——>遍历行并对className进行样式修改——>利用class选择器设计预定义css样式

　　（2）鼠标事件高亮显示行内容：遍历行节点对象时添加鼠标事件——>添加变量记录原来css样式——>onmouseover事件修改css事件——>onmouseout事件引入变量记录css样式进行还原

　　（3）全选（checkbox）：思路要想获取全选box的节点对象有两个办法一个通过document定位，一个通过this传递；因为这里有2个全选box所以使用this比较方便；创建点击事件——>获取所有box节点——>通过操作checked属性将全选box的chencked属性赋值给每一个box的checked属性

　　（4）全选、反选、取消所选（button）：思路单独定义每一个功能的js代码可以实现，但是代码繁琐；仔细分析发现三个功能都是对box节点的checked属性进行操作，因此我们可以定义一个功能传递不同的参数来完成这些功能设计；首先同上获取所有box节点并遍历——>通过参数判断确定功能运行代码逻辑（具体查看代码）

　　（5）删除邮件：获取box节点并遍历——>找出checked属性=true的box节点——>box节点的父节点是td，td父节点是tr——>思路只要删除tr节点就能删除邮件，所以利用tr父节点删除tr节点;——>需要注意removeChild方法会改变集合长度，所以操作时要保证遍历到每一个box节点（详细查看代码处理方式）

table{
    width:500px;
    border:1px solid #ccff00;
    border-collapse:collapse;
}
table td{
    border:    1px solid #ccff00;
    padding:5px;
}
table th{
    background-color:rgb(200,200,200);
    border:1px solid #ccff00;
    padding:5px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="table.css"/>
    <style type="text/css">
    .one{background-color:#ffaadd;}
    .two{background-color:#aaddcc;}
    .over{background-color:#ffcc00;}
    </style>
    <script type="text/javascript">
    var name;
    //颜色间隔显示功能
    function trcolor(){
        var otabNode = document.getElementById("tab_1");
        var otrNodes = otabNode.rows;
        for(var x = 1;x<otrNodes.length;x++){
            if(x%2==1){
                otrNodes[x].className="one";
            }else{
                otrNodes[x].className="two";
            }
            otrNodes[x].onmouseover=function(){
                name=this.className;
                this.className="over";
            }
            otrNodes[x].onmouseout=function(){
                this.className=name;
            }
        }
    }
    onl oad =function (){
        trcolor();
        
    }
    function checkAll(node){
        var collMailNodes = document.getElementsByName("all");
        for(var x=0;x<collMailNodes.length;x++){
            collMailNodes[x].checked=node.checked;
        }
    }
    function checkAllByBut(num){
        var collMailNodes = document.getElementsByName("all");
        for(var x=0;x<collMailNodes.length;x++){
            if(num>1){
                collMailNodes[x].checked=!collMailNodes[x].checked;
            }else{
                collMailNodes[x].checked=num;    
            }
        }
    }
    function delMail(){
        if(!confirm("确定删除所选的邮件吗？")){
            return;
            }
        var collMailNodes = document.getElementsByName("all");
        for(var x=0;x<collMailNodes.length;x++){
            if(collMailNodes[x].checked){
                var otrNode = collMailNodes[x].parentNode.parentNode;
                otrNode.parentNode.removeChild(otrNode);
                x--;
            }
        }
        trcolor();
    }
    </script>
</head>
<body>
    <table id="tab_1">
        <tr>
            <th>
                <input type="checkbox" name="all_1" onclick="checkAll(this)"/>全选
            </th>
            <th>
            发件人
            </th>
            <th>
            邮件名称
            </th>
            <th>
            邮件附属信息
            </th>
        </tr>
    <tr>
            <td><input type="checkbox" name="all"/></td>
            <td><a href="javascript:void(0)">mr.Li</a></td>
            <td><a href="javascript:void(0)">邮件（1）</a></td>
            <td><a href="javascript:void(0)">邮件测试</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="all"/></td>
            <td><a href="javascript:void(0)">mr.wang</a></td>
            <td><a href="javascript:void(0)">邮件（2）</a></td>
            <td><a href="javascript:void(0)">邮件测试</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="all"/></td>
            <td><a href="javascript:void(0)">katy</a></td>
            <td><a href="javascript:void(0)">邮件（3）</a></td>
            <td><a href="javascript:void(0)">邮件测试</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="all"/></td>
            <td><a href="javascript:void(0)">java</a></td>
            <td><a href="javascript:void(0)">邮件（4）</a></td>
            <td><a href="javascript:void(0)">邮件测试</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="all"/></td>
            <td><a href="javascript:void(0)">killy</a></td>
            <td><a href="javascript:void(0)">邮件（5）</a></td>
            <td><a href="javascript:void(0)">邮件测试</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="all"/></td>
            <td><a href="javascript:void(0)">sky</a></td>
            <td><a href="javascript:void(0)">邮件（6）</a></td>
            <td><a href="javascript:void(0)">邮件测试</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="all"/></td>
            <td><a href="javascript:void(0)">allies</a></td>
            <td><a href="javascript:void(0)">邮件（7）</a></td>
            <td><a href="javascript:void(0)">邮件测试</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="all"/></td>
            <td><a href="javascript:void(0)">jack</a></td>
            <td><a href="javascript:void(0)">邮件（8）</a></td>
            <td><a href="javascript:void(0)">邮件测试</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="all"/></td>
            <td><a href="javascript:void(0)">rose</a></td>
            <td><a href="javascript:void(0)">邮件（9）</a></td>
            <td><a href="javascript:void(0)">邮件测试</a></td>
        </tr>
        <tr>
            <th><input type="checkbox" name="all_2" onclick="checkAll(this)"/>全选</th>
            <th colspan="3">
                <input type="button" name="all_but" value="全选" onclick="checkAllByBut(1)"/>
                <input type="button" name="all_but" value="取消全选" onclick="checkAllByBut(0)"/>
                <input type="button" name="all_but" value="反选" onclick="checkAllByBut(2)"/>
                <input type="button" name="all_but" value="删除所选附件" onclick="delMail()"/>
            </th>
        </tr>
    </table>

</body>
</html>

 

DOM_mail效果


联系
我们