javaseday38(邮件全反选删除调查问卷测试)_邮件的全选反选和删除java-CSDN博客

本文介绍了一种使用JavaScript实现的邮件列表行颜色间隔显示及复选框操作功能，并附带了一个简单的在线性格测试示例。

<script type="text/javascript">
    //行颜色间隔显示功能
    var name;
    function trColor()
    {
        //1、获取表格对象
        var oTabNode = document.getElementById("mailTable");
        //2、获取行对象
        var collTrNodes = oTabNode.rows;
        //3、对所有需要设置背景的行对象进行遍历
        for(var x =1;x<collTrNodes.length-1;x++)
        {
            if(x%2==1)
            {
                collTrNodes[x].className="one"; 
            }   
            else
            {
                collTrNodes[x].className="two"; 
            }
            collTrNodes[x].onmouseover = function()
            {
                name = this.className;
                this.className ="over";
            }
            collTrNodes[x].onmouseout = function()
            {
                this.className = name;  
            }
        }

    }
    window.onload = function()
    {
        trColor();  
    }
    //复选框的全选动作
    function checkAll(node)
    {
        //获取所有的mail复选框
        var mailNodes = document.getElementsByName("mail");
        for (var x = 0;x<mailNodes.length;x++)
        {
            mailNodes[x].checked =  node.checked;   
        }   
    }
    //定义操作复选框按钮的方法
    function checkAllByBut(num)
    {
        var mailNodes = document.getElementsByName("mail");
        for (var x = 0;x<mailNodes.length;x++)
        {
            if(num>1)
            {
                mailNodes[x].checked = !mailNodes[x].checked;   
            }
            else 
                mailNodes[x].checked = num;
        }   
    }
    //删除所选邮件
    function deleteMail()
    {
        //获取所有mail节点
        if(!confirm("真的要删除?")){
            return;
        }
        var mailNodes = document.getElementsByName("mail");
        for (var x = 0;x<mailNodes.length;x++)
        {
            if(mailNodes[x].checked)
            {
                //也可以弄个临时容器存储所有要删的一次性删除
                var trNode = mailNodes[x].parentNode.parentNode;    
                trNode.parentNode.removeChild(trNode);//只要remove就会改变长度 长度减少 x却在递增
                x--;
            }
        }   
        trColor();
    }
</script>
</head>

<body>
<table id="mailTable">
    <tr>
        <th><input type="checkbox" name="all"  onclick="checkAll(this)"/></th>
        <th>发件人</th>
        <th>邮件名称</th>
        <th>附属信息</th>    
    </tr>
     <tr>
        <td><input type="checkbox" name="mail" /></td>
        <td>张三1</td>
        <td>新的邮件1</td>
        <td>附属信息1</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="mail" /></td>
        <td>张三2</td>
        <td>新的邮件2</td>
        <td>附属信息2</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="mail" /></td>
        <td>张三3</td>
        <td>新的邮件3</td>
        <td>附属信息13</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="mail" /></td>
        <td>张三4</td>
        <td>新的邮件4</td>
        <td>附属信息14</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="mail" /></td>
        <td>张三5</td>
        <td>新的邮件5</td>
        <td>附属信息15</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>

<style type="text/css">
    #contentid{
        display:none;
    }
    #num1{
        list-style:none;
        margin:0px;
        padding:0px;
    }
    .close{
        display:none;
    }
    .open{
        display:block;
    }

</style>
<script type="text/javascript">
    function showResult()
    {
        //1、判断是否有答案被选中
        //获取所有num1的radio 并遍历判断checked状态
        var oNo1Nodes = document.getElementsByName("no1");
        var flag =false;
        var val = 0;
        for(var x =0;x<oNo1Nodes.length;x++)
        {
            if(oNo1Nodes[x].checked)
            {
                flag =true;
                val = oNo1Nodes[x].value;
                document.getElementById("errorinfo").innerHTML="";
                break;  
            }   

        }   
        if(!flag)
        {
            document.getElementById("errorinfo").innerHTML="没有任何答案被选中".fontcolor("red");
            return;
        }
        if(val>=1&&val<=3)
        {
            document.getElementById("re_1").className="open";   
            document.getElementById("re_2").className="close";
        }
        else
        {
            document.getElementById("re_1").className="close";  
            document.getElementById("re_2").className="open";
        }

    }
</script>

</head>

<body>
    <!--
    单选按钮展示
    1、是否参与调查问卷
    2、性格测试
     -->
        <!--性格测试-->
        <h2>参加性格测试</h2>
       <div>
        <h3> 第一题</h3>
        <span>您喜欢的水果是什么？</span>
        <ul id="num1">
           <li><input type="radio" name="no1" value="1" /> 葡萄</li>
           <li><input type="radio" name="no1" value="2" /> 西瓜</li>
           <li><input type="radio" name="no1" value="3" /> 苹果</li>
           <li><input type="radio" name="no1" value="4" /> 芒果</li>
        <ul>
        </div>
        <div>
        <input type="button" value="查看结果" onclick="showResult()" />
        <span id="errorinfo"></span>
        <div id="re_1" class="close">1-3分 您的性格内向</div>
        <div id="re_2" class="close">4分 您的性格外向</div>
        </div>


     <hr />
     <script type="text/javascript">
        function showContent(node)
        {
            var oDivNode =  document.getElementById("contentid");
            with(oDivNode.style){
                if(node.value=="yes")
                {
                    display="block";    
                }
                else 
                {
                    display="none";
                }
            }
        }
     </script>
     <!--问卷调查 -->
     <div>
     要参与么? <input type="radio" name="wenjuan" value="yes" onclick="showContent(this)"/>是
             <input type="radio" name="wenjuan" value="no" checked="checked" onclick="showContent(this)" />否
     </div>
     <div id="contentid">
     问卷调查内容 <br />
     您的姓名<input type="text" /><br/>
     您的邮箱<input type="text" /> 
     </div>  
</body>