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

表格样式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、2if(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" οnclick="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" οnclick="checkAll(this)" />全选</th><th colspan="3">   <!-- 【注意】这个colspan必须有，意思是将三个单元格合并成一列 --><!--【注意】在做效果【四】的时候，由于“全选”、“取消全选”、“反选”这三个功能类似，所以可以定义在同一个function内，但是你怎么知道当前function应该为哪个按钮所用？即你怎么知道当前是哪个按钮在调用function，所以在下面三个按钮中定义事件onclick，通过往里面传值1、0、2来区分不同的按钮操作。-->              <input type="button" value="全选" οnclick="checkAllByBut(1)" /><input type="button" value="取消全选" οnclick="checkAllByBut(0)" /><input type="button" value="反选" οnclick="checkAllByBut(2)" /><input type="button" value="删除所选附件" οnclick="deleteMail()" /></th></tr></table></body>
</html>

DOM（三）-01-(示例-邮件列表)相关推荐

实验三综合示例设计与开发-“天气预报服务”软件
实验三综合示例设计与开发-"天气预报服务"软件一.实验目的 (1)理解Android 软件开发从准备策划工作开始到软件发布全过程: (2)掌握使用多种组件进行Android程序 ...
订阅w3c组织邮件列表申请方法
订阅www.w3.org组织邮件列表申请方法目录订阅www.w3.org组织邮件列表申请方法一.申请w3C机构的社区及商业组账户二.邮件列表三.加入社区组或工作组 3.1.社区组 3.2.工 ...
TVM开发三个示例分析
TVM开发三个示例分析把自主生成的代码生成TVM 把自主生成的代码生成TVM 目录简介要生成C代码. 要生成任何其它图形表示. 实现一个C代码生成器实现[CodegenC] 运算符代码生成输 ...
python发送qq邮件列表_Python SMTP发送邮件
发送邮件是个很常用的功能.比如自己写个脚本获取并分析股票或期货数据,如果发现有交易机会.此时可以发个邮件来提醒自己. SMTP即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控 ...
WCF学习之旅—第三个示例之四（三十）
上接WCF学习之旅-第三个示例之一(二十七) WCF学习之旅-第三个示例之二(二十八) WCF学习之旅-第三个示例之三(二十九) ...
LLVM邮件列表2018年4月内容选辑
缘起: LLVM的邮件列表关注了很久,最闲的时候每篇都读,也回过几篇邮件.忙的时候,可能好几个月不怎么读,积累一大堆未读,只能直接清理了.后来,有人做了llvmweekly,好了很多,每周花点时间看一 ...
php获取邮箱邮件列表,让PHP管理小型的邮件列表
最近有一个读者问我关于ThickBook新闻列表中处理订阅/退订的机制,并且是如何与实际的发送信息相配合,给邮件列表中的所有收信人的.问题提的不错,有一个相当容易的方法,但是我首先要说的是我所做的没有 ...
拥抱开源，如何关注Linux Kernel 邮件列表？
如今开源如此火爆,以至于张口闭口不提到都仿佛不是搞IT 的,那么如何拥抱开源?本文适合初学者,如有大神至此,goto exit ! 一.如何加入开源以Linux 为例,这么一个成功的开源项目需要做哪 ...

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

DOM（三）-01-(示例-邮件列表)相关推荐

最新文章

热门文章