黑马程序员:实现邮件列表功能的学习。
2012-02-19 16:29
330 查看
------------------------------------------------------------------android培训、java培训、期待与您交流!--------------------------------------------------------
1.掌握的内容有:复选框全选,按钮全选,按钮取消全选,按钮反选,按钮删除所选邮件并弹出确认对话框,行颜色间隔显示,鼠标经过时高亮显示,离开时还原。
2.通过比较自己的代码和教程演示代码,掌握了可以使代码更加简洁的编程思想。
☆按钮全选,取消全选,反选可以用一个函数实现。
注释:javascript中0为false,非0为true。全选(1),取消全选(0),反选(2)。
☆编程中对非(!)的应用可以简化代码。
☆上面代码的另一种写法:
---------------------- android培训、java培训、期待与您交流! ----------------------详细请查看:http://edu.csdn.net/heima
1.掌握的内容有:复选框全选,按钮全选,按钮取消全选,按钮反选,按钮删除所选邮件并弹出确认对话框,行颜色间隔显示,鼠标经过时高亮显示,离开时还原。
2.通过比较自己的代码和教程演示代码,掌握了可以使代码更加简洁的编程思想。
☆按钮全选,取消全选,反选可以用一个函数实现。
function checkByButton(num) { var emails = document.getElementsByName("email"); for(var x=0; x<emails.length; x++) { if(num<1) emails[x].checked = !emails[x].checked; else emails[x].checked = num; } }
注释:javascript中0为false,非0为true。全选(1),取消全选(0),反选(2)。
☆编程中对非(!)的应用可以简化代码。
function delemail() { if(!confirm( "确定删除所选邮件吗?")) return; 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; } } //删除所选邮件 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(); } //全选按钮 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培训、期待与您交流! ----------------------详细请查看:http://edu.csdn.net/heima
相关文章推荐
- 黑马程序员:实现邮件列表功能的学习。
- 黑马程序员-JAVA学习之工厂方法模式,工厂类用反射功能实现
- 【学习ios之路:UI系列】实现打电话,发短信,发邮件功能
- Linux学习-->如何通过Shell脚本实现发送邮件通知功能?
- salesforce 零基础学习(四十四)实现checkbox列表简单过滤功能
- BootStrap实现邮件列表的分页和模态框添加邮件的功能
- C#学习之利用泛型实现列表功能
- 【黑马程序员】简单拍照功能的实现(学习笔记)之一
- 关于bootstrap分页,模态框,实现邮件列表的分页,和模态框添加邮件的功能
- 【黑马程序员】简单拍照功能的实现(学习笔记)之二
- Linux学习-->如何通过Shell脚本实现发送邮件通知功能?
- 用通讯组实现邮件列表:Exchange2003学习系列之九
- GTK进阶学习:GTK实现截图功能( 可以指定截图范围 )
- salesforce零基础学习(八十三)analytics:reportChart实现Dashboard(仪表盘)功能效果
- UM功能实现和配置技巧(上)--语音邮件、传真功能
- Android 学习笔记之如何实现简单相机功能
- 电商网站首页商品分类列表功能实现
- 实现文本框的联想功能(类似邮件的收件人)
- 翻翻git之---自定义邮件发送按钮SendButton(流程分析,实现思路可以学习下)
- 自定义BaseAdapter,实现列表显示功能