邮箱效果制作：
步骤：
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; } } } onload =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>
