黑马程序员:实现邮件列表功能的学习。
来源:互联网 发布:淘宝网服务协议 编辑:程序博客网 时间:2024/05/15 07:01
------- android培训、java培训、期待与您交流! ----------
1.掌握的内容有:复选框全选,按钮全选,按钮取消全选,按钮反选,按钮删除所选邮件并弹出确认对话框,行颜色间隔显示,鼠标经过时高亮显示,离开时还原。
2.通过比较自己的代码和教程演示代码,掌握了可以使代码更加简洁的编程思想。
☆按钮全选,取消全选,反选可以用一个函数实现。
- function checkByButton(num)
- {
- var emails = document.getElementsByName("email");
- for(var x=0; x<emails.length; x++)
- {
- if(num<1)
- <span style="color:#ff6666;">emails[x].checked = !emails[x].checked;
- </span> else
- emails[x].checked = num;
- }
- }
注释:javascript中0为false,非0为true。全选(1),取消全选(0),反选(2)。☆编程中对非(!)的应用可以简化代码。
- function delemail()
- {
- <span style="color:#ff6666;">if(!confirm( "确定删除所选邮件吗?"))
- return;
- </span> var emails = document.getElementsByName("email");
- for(var x=0; x<emails.length; x++)
- {
- if(emails[x].checked==true)
- {
- var trNode = emails[x].parentNode.parentNode;
- trNode.parentNode.removeChild(trNode);
- x--;
- }
- }
- trcolor();
- }
☆上面代码的另一种写法:
- function delEmail()
- {
- if(!confirm("真的要删除所选邮件吗?"))
- return;
- var emails = document.getElementsByName("email");
- var arr = new array();
- var pos = 0;
- for(var x=0; x<emails.length; x++)
- {
- if(emails[x].checked)
- {
- var trNode = emails[x].parentNode.parentNode;
- arr[pos++] = trNode;
- }
- }
- for(var x=0; x<arr.length; x++)
- {
- var trNode = arr[x];
- trNode.parentNode.removeChild(trNode);
- }
- trColor();
- }
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- <style type="text/css">
- table,table th,table td{
- border:#F90 1px solid;
- }
- table{
- width:50%;
- }
- table th{
- background-color:#6C0;
- }
- .one{
- background-color:#9FC;
- }
- .two{
- background-color:#9F3;
- }
- .over{
- background-color:#F00;
- }
- </style>
- <script type="text/javascript">
- //间隔变色加高亮
- var name;
- function trColor()
- {
- var tabNode = document.getElementsByTagName("table")[0];
- var trs = tabNode.rows;
- for(var x = 1; x<trs.length-1; x++)
- {
- if(x%2==1)
- trs[x].className = "one";
- else
- trs[x].className = "two";
- trs[x].onmouseover = function ()
- {
- name = this.className;
- this.className = "over";
- };
- trs[x].onmouseout = function()
- {
- this.className = name;
- };
- }
- }
- window.onload = trcolor;
- //全选复选框
- function checkAll(index)
- {
- var allNode = document.getElementsByName("all")[index];
- var emails = document.getElementsByName("email");
- for(var x = 0; x<emails.length; x++)
- {
- emails[x].checked = allNode.checked;
- }
- }
- //删除所选邮件
- <span style="color:#ff6666;">function delemail()
- {
- if(confirm( "确定删除所选邮件吗?"))
- {
- var emails = document.getElementsByName("email");
- for(var x=0; x<emails.length; x++)
- {
- if(emails[x].checked==true)
- {
- var trNode = emails[x].parentNode.parentNode;
- trNode.parentNode.removeChild(trNode);
- x--;
- }
- }
- }
- trcolor();
- }
- </span>//全选按钮
- function butAll()
- {
- var emails = document.getElementsByName("email");
- for(var x=0; x<emails.length; x++)
- {
- if(emails[x].checked==false)
- emails[x].checked = true;
- }
- }
- //取消全选
- function delAll()
- {
- var emails = document.getElementsByName("email");
- for(var x=0; x<emails.length; x++)
- {
- if(emails[x].checked==true)
- emails[x].checked = false;
- }
- }
- //反选
- function fanXuan()
- {
- var emails = document.getElementsByName("email");
- for(var x=0; x<emails.length; x++)
- {
- if(emails[x].checked==true)
- emails[x].checked = false;
- else
- emails[x].checked = true;
- }
- }
- </script>
- </head>
- <body>
- <table>
- <tr>
- <th>
- <input type="checkbox" name="all" onclick="checkAll(0)" />全选
- </th>
- <th>
- 收件人
- </th>
- <th>
- 邮件标题
- </th>
- </tr>
- <tr class="one" >
- <td>
- <input type="checkbox" name="email" />
- </td>
- <td>
- 王五01
- </td>
- <td>
- 新的邮件
- </td>
- </tr>
- <tr class="two">
- <td>
- <input type="checkbox" name="email"/>
- </td>
- <td>
- 王五02
- </td>
- <td>
- 新的邮件
- </td>
- </tr>
- <tr>
- <td>
- <input type="checkbox" name="email"/>
- </td>
- <td>
- 王五03
- </td>
- <td>
- 新的邮件
- </td>
- </tr>
- <tr>
- <td>
- <input type="checkbox" name="email" />
- </td>
- <td>
- 王五04
- </td>
- <td>
- 新的邮件
- </td>
- </tr>
- <tr>
- <td>
- <input type="checkbox" name="email"/>
- </td>
- <td>
- 王五05
- </td>
- <td>
- 新的邮件
- </td>
- </tr>
- <tr>
- <th>
- <input type="checkbox" name="all" onclick="checkAll(1)"/>全选
- </th>
- <th colspan="2">
- <input type="button" value="全选" onclick="butAll()"/>
- <input type="button" value="取消全选" onclick="delAll()"/>
- <input type="button" value="反选" onclick="fanXuan()" />
- <input type="button" value="删除所选邮件" onclick="delemail()" />
- </th>
- </tr>
- </table>
- </body>
- </html>
------- android培训、java培训、期待与您交流! ----------
0 0
- 黑马程序员:实现邮件列表功能的学习。
- 黑马程序员:实现邮件列表功能的学习。
- 关于bootstrap分页,模态框,实现邮件列表的分页,和模态框添加邮件的功能
- 【黑马程序员】简单拍照功能的实现(学习笔记)之一
- 【黑马程序员】简单拍照功能的实现(学习笔记)之二
- 黑马程序员_Java Mail实现邮件发送
- 黑马程序员-001用户登录界面功能的实现
- 黑马程序员_反射的作用-实现框架功能
- 黑马程序员_反射的作用实现框架功能
- 《黑马程序员》 文件列表的创建
- 黑马程序员学习log第十三篇Java 小功能实现对象总结
- 替代System.Web.Mail的新类库(新增邮件列表功能)
- 黑马程序员_String类的常用功能
- 通过邮件找回密码功能的实现
- 通过邮件找回密码功能的实现
- 通过邮件找回密码功能的实现
- 透过邮件找回密码功能的实现
- 实现邮箱发邮件的功能
- The process of producing film faced plywood
- FJNU摸底赛_acdream1684(博弈)
- 泛型类和泛型方法
- UI ⼿势识别器UIScreenEdgePanGestureRecognizer
- 线性代数导论8——求解Ax=b:可解性和解的结构
- 黑马程序员:实现邮件列表功能的学习。
- Oracle 11g Data Guard 物理备库快速配置指南(上)
- 第六周项目4-成员函数、友元函数和一般函数有区别
- POJ 2559 Largest Rectangle in a Histogram (DP最大矩形面积)
- [转] live555 -- 運作原理
- 解题报告 之 POJ2728 Desert King
- WebLogic SSRF And XSS (CVE-2014-4241, CVE-2014-4210, CVE-2014-4242)
- 跟我一起写Makefile
- POJ2251 Dungeon Master(搜索BFS)