邮箱效果制作：
步骤：
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>
时间： 2024-10-11 15:48:18