您的位置：首页 > 其它

DOM（三）-01-(示例-邮件列表)

2015-08-20 17:18 411 查看
表格样式table.css代码

@CHARSET "UTF-8";

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

table td{
border:#249bdb 1px solid;
padding:5px;/*td左边顶格*/
}
table th{
border:#249bdb 1px solid;
padding:5px;
background-color: rgb(200,200,200);/*可以通过这种方式设置背景色*/
}


主程序代码

<!--
【综合练习】邮件列表，包含选择邮件，全选按钮，删除邮件按钮等等
1.添加行颜色间隔显示功能；——对应【一】
2.添加鼠标悬停高亮、离开恢复功能；——对应【二】
3.添加全选功能；——对应【三】
4.添加“全选”、“取消全选”、“反选”这三个按钮的功能；——对应【四】
5.添加“删除所选邮件”这个按钮的功能；——对应【五】
-->

<html>
<head>
<style type="text/css">
@import url(table.css);
.one{/*表格奇数行背景样式*/
background-color:#9bf7d5;
}
.two{/*表格偶数行背景样式*/
background-color:#f3e99a;
}
.over{/*鼠标悬停在某行高亮样式*/
background-color:ef7125;
}
</style>
</head>
<body>
<script type="text/javascript">

var name;//该变量用于制作【二】，记录原样式
//【一】行颜色间隔显示功能。
function trColor(){

//【一（1）】获取表格对象
var oTabNode = document.getElementById("mailtable");

//【一（2）】因为要做行间隔显示功能，所以需要拿到所有行节点对象，【记住】要操作什么节点，就获取什么节点，这点万变不离其宗
var collTrNodes = oTabNode.rows;

//【一（3）】对所有需要设置背景的行节点对象进行遍历（【注意】这里循环初值从1开始，因为1对应表格第二行，表格第一行背景无需设置
for(var x=1;x<collTrNodes.length-1;x++){//【注意】本例中表格最后一行也不需要设置背景

if(x%2 == 1){//奇数行
collTrNodes[x].className = "one";
}else{//偶数行
collTrNodes[x].className = "two";
}

//【二】添加光标悬停高亮、离开恢复的功能
/*
*因为表格除了头尾两行外，每行都需要该功能，所以直接定义在这个for循环内部
*/
collTrNodes[x].onmouseover = function(){

name = this.className;
this.className = "over";//this表示当前鼠标悬停的一行
}

collTrNodes[x].onmouseout = function(){

this.className = name;
}
}
}

//定义运行自定义函数的方法，必须全部加载完再调用自定义函数并运行
onload = function(){

trColor();
}

//【三】复选框的全选功能
function checkAll(node){

//【三（1）】获取所有的mail复选框
var collMailNodes = document.getElementsByName("mail");

//【三（2）】遍历所有mail复选框节点对象，将全选的checked状态逐一赋给这些复选框的checked状态。即它们checked状态统一
for(var x=0;x<collMailNodes.length;x++){

collMailNodes[x].checked = node.checked;
}
}

//【四】定义操作复选框按钮的方法。
function checkAllByBut(num){

var collMailNodes = document.getElementsByName("mail");

for(var x=0;x<collMailNodes.length;x++){

//从table中的最后一个tr节点可知，num只能有三种形式：0、1、2
if(num>1){
/*
*num>1即num=2，说明此时是“反选”按钮在调用function，那根据反选的含义：原来选中的现在
*不选，原来不选的现在选，也就是将当前遍历到的mail复选框的checked属性取非运算。
*/
collMailNodes[x].checked = !collMailNodes[x].checked;
}else{
/*
*这里说明为什么table最后一个tr节点中的“全选”、“取消全选”、“反选”三个按钮中的onclick事件传入1、0、2三个数字：
*
*因为这里else说明num<=1，即num=1或0,那么如果num=1说明是“全选”，即所有mial复选框都要被选中，即所有mail复选框
*的checked属性都必须为true，那么num此时为1，1就是真，所以将num赋给collMailNodes[x].checked；同样，如果num=0，
*说明是“取消全选”，即所有mail复选框都不选，即素有mail复选框的checked属性都必须为false，那么num此时为0，0就是
*假，所以将num赋给collMailNodes[x].checked。所以只要不是“反选”，直接将num赋给collMailNodes[x].checked。
*/

collMailNodes[x].checked = num;
}
}
}

//【五】删除所选邮件功能
function deleteMail(){

//因为本程序还没设置“恢复删除邮件”的功能，所以这里加个提示判断
if(confirm("您真的要删除吗？注意，删除后不可恢复！")){

//【五（1）】获取所有mail节点
var collMailNodes = document.getElementsByName("mail");

//【五（2）】遍历所有mail复选框，判断是否被选中，选中就删除一行
for(var x=0;x<collMailNodes.length;x++){

if(collMailNodes[x].checked == true){

/*
*如果if条件满足，说明该mail复选框已被选中，即准备删除该行，所以先拿到其行节点，观察table内代码发现，
*mail复选框的父节点是td，td的父节点是tr，所以mail复选框是tr节点的“孙子”，所以连续两次调用parentNode
*即可拿到被选中行的行节点对象。
*/
var oTrNode = collMailNodes[x].parentNode.parentNode;
oTrNode.parentNode.removeChild(oTrNode);
/*
*【特别注意】说明为什么要x--？
*如果没有x--，当选中表格中“张三22”、“张三33”、“张三44”、“张三55”这4行邮件，然后单击“删除所选附件”按钮，
*会出现“张三22”和“张三33”被干掉，而“张三33”和“张三44”还保留，原因如下：
*【记住】只要是remove相关方法，就一定改变数组长度，比如一个容器中有2、3、4、5这四个元素，角标是0、1、2、3，此时
*指针port指向第一个元素，即停在角标0位置，当用remove删除第一个元素后，后面三个元素一次向前“补位”，但是此时指针
*port指向第二个元素，即停在角标1位置，这时候角标1上的元素是4，然后再调用remove删除该位置上的元素，所以本来想一次
*删除4个元素，现在变成删除2和4，3和5保留，这就是原因。（可以自己动手画个草图，一目了然）
*
*【解决办法】让指针在每删除一个元素时候，回到前一个位置，即x--，因为remove方法删一个元素，指针会右移一位，这样
*保证指针自始至终都指向容器起始位置。
*/
x--;
}
}
//在删除部分邮件后，让界面再次恢复行间隔显示效果。
trColor();//如果不再调用trColor()方法，会导致删除部分邮件后，不再是行间隔显示效果。
}
}

</script>

<table id="mailtable">
<tr>
<th>
<input type="checkbox" name="selectall" onclick="checkAll(this)" />全选
</th>
<th>
发件人
</th>
<th>
邮件名称
</th>
<th>
邮件附属信息
</th>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<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>
张三117
</td>
<td>
我是邮件117
</td>
<td>
我是附属信息117
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三118
</td>
<td>
我是邮件118
</td>
<td>
我是附属信息118
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三119
</td>
<td>
我是邮件119
</td>
<td>
我是附属信息119
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三1100
</td>
<td>
我是邮件1100
</td>
<td>
我是附属信息1100
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三11a
</td>
<td>
我是邮件11a
</td>
<td>
我是附属信息11a
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三11b
</td>
<td>
我是邮件11b
</td>
<td>
我是附属信息11b
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三11c
</td>
<td>
我是邮件11c
</td>
<td>
我是附属信息11c
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三11d
</td>
<td>
我是邮件11d
</td>
<td>
我是附属信息11d
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三11e
</td>
<td>
我是邮件11e
</td>
<td>
我是附属信息11e
</td>
</tr>
<tr>
<th>
<input type="checkbox" name="selectall" onclick="checkAll(this)" />全选
</th>
<th colspan="3">	<!-- 【注意】这个colspan必须有，意思是将三个单元格合并成一列 -->
<!--
【注意】在做效果【四】的时候，由于“全选”、“取消全选”、“反选”这三个功能类似，所以可以定义在同一个function内，
但是你怎么知道当前function应该为哪个按钮所用？即你怎么知道当前是哪个按钮在调用function，所以在下面三个按钮中定义
事件onclick，通过往里面传值1、0、2来区分不同的按钮操作。
-->
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航