选择框的应用(类似如邮件管理)
实现功能:类似如邮箱中对邮件的管理:
选择邮件,删除邮件,全选,反选,取消全选等
- <html>
- <head>
- <title>DHTML技术演示---checkbox的使用2</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <style type="text/css">
- @import url(table.css)/*这个css样式要自己写一个文件导入进来*/
- </style>
- <script type="text/javascript">
- var name;
- function trColor(){
- var oTableNode = document.getElementById("mailTable");
- var collTrNodes = oTableNode.rows;
- for(var x=1; x<collTrNodes.length-1;x++){
- if(x%2==1){
- collTrNodes[x].className="one";
- }else{
- collTrNodes[x].className="two";
- }
- collTrNodes[x].οnmοuseοver=function(){
- name = this.className;
- this.className="over";
- /*下面这种注册事件的方式也可以
- this.οnmοuseοut=function(){
- this.className=name;
- }
- */
- }
- collTrNodes[x].οnmοuseοut=function(){
- this.className=name;
- }
- }
- }
- onload = function(){
- trColor();
- }
- function checkAll(aChkboxNode){
- var collMailNodes = document.getElementsByName("mail");
- for(var x=0;x<collMailNodes.length;x++){
- collMailNodes[x].checked = aChkboxNode.checked;
- }
- var collChkboxAllNodes = document.getElementsByName("all");
- collChkboxAllNodes[0].checked = aChkboxNode.checked;
- collChkboxAllNodes[1].checked = aChkboxNode.checked;
- }
- function checkAllByBtn1(flag){
- var collMailNodes = document.getElementsByName("mail");
- for(var x=0;x<collMailNodes.length;x++){
- collMailNodes[x].checked = flag;
- }
- var collChkboxAllNodes = document.getElementsByName("all");
- collChkboxAllNodes[0].checked = flag;
- collChkboxAllNodes[1].checked = flag;
- //取消部分选中时的显示样式
- collChkboxAllNodes[0].indeterminate=false;
- collChkboxAllNodes[1].indeterminate=false;
- }
- function checkAllByBtn2(){
- var collMailNodes = document.getElementsByName("mail");
- var n=0;
- for(var x=0;x<collMailNodes.length;x++){
- collMailNodes[x].checked = !collMailNodes[x].checked;
- if( collMailNodes[x].checked ){
- n++;
- }
- }
- var collChkboxAllNodes = document.getElementsByName("all");
- collChkboxAllNodes[0].indeterminate=false;
- collChkboxAllNodes[1].indeterminate=false;
- if(n==0){
- collChkboxAllNodes[0].checked = false;
- collChkboxAllNodes[1].checked = false;
- }else if(n==collMailNodes.length){
- collChkboxAllNodes[0].checked = true;
- collChkboxAllNodes[1].checked = true;
- }else{//部分选中时的显示样式
- collChkboxAllNodes[0].indeterminate=true;
- collChkboxAllNodes[1].indeterminate=true;
- }
- }
- //把上面两个函数合在一起
- function checkAllByBtn(num){
- var collMailNodes = document.getElementsByName("mail");
- //取消部分选中时的显示样式
- var collChkboxAllNodes = document.getElementsByName("all");
- collChkboxAllNodes[0].indeterminate=false;
- collChkboxAllNodes[1].indeterminate=false;
- var n=0;
- for(var x=0;x<collMailNodes.length;x++){
- if(num>1){
- collMailNodes[x].checked = !collMailNodes[x].checked;
- }else{
- collMailNodes[x].checked = num;
- }
- if(collMailNodes[x].checked){
- n++;
- }
- }
- if(n==0){
- collChkboxAllNodes[0].checked = false;
- collChkboxAllNodes[1].checked = false;
- }else if(n==collMailNodes.length){
- collChkboxAllNodes[0].checked = true;
- collChkboxAllNodes[1].checked = true;
- }else{//部分选中时的显示样式
- collChkboxAllNodes[0].indeterminate=true;
- collChkboxAllNodes[1].indeterminate=true;
- }
- }
- function deleteMail(){
- if(!confirm("你真的要删除所选邮件吗?")){
- return;
- }
- //获取所有选中的邮件
- var collMailChkNodes = document.getElementsByName("mail");
- for(var x=0;x<collMailChkNodes.length;x++){
- if(collMailChkNodes[x].checked){//选中,则删除
- //先拿到tr对象
- var oTrNode = collMailChkNodes[x].parentNode.parentNode;
- oTrNode.parentNode.removeChild(oTrNode);
- //bug:节点容器中,remove之后,长度会变。
- x--;//长度修正--还有一种解决方案是:从后往前删
- }
- }
- trColor();
- }
- </script>
- </head>
- <body>
- <h2>邮件列表</h2>
- <table id="mailTable">
- <tr>
- <th><input type="checkbox" name="all" οnclick="checkAll(this)"/>全选</th>
- <th>发件人</th> <th>邮件标题</th> <th>时间</th>
- </tr>
- <tr>
- <td><input type="checkbox" name="mail" /></td>
- <td>张三</td> <td>邮件标题11</td> <td>2016年6月16日</td>
- </tr>
- <tr>
- <td><input type="checkbox" name="mail" /></td>
- <td>李四</td> <td>邮件标题22</td> <td>2016年6月15日</td>
- </tr>
- <tr>
- <td><input type="checkbox" name="mail" /></td>
- <td>张四</td> <td>邮件标题33</td> <td>2016年6月14日</td>
- </tr>
- <tr>
- <td><input type="checkbox" name="mail" /></td>
- <td>Jack</td> <td>邮件标题44</td> <td>2016年6月18日</td>
- </tr>
- <tr>
- <td><input type="checkbox" name="mail" /></td>
- <td>Rose</td> <td>邮件标题55</td> <td>2016年6月25日</td>
- </tr>
- <tr>
- <td><input type="checkbox" name="mail" /></td>
- <td>张六</td> <td>邮件标题66</td> <td>2016年6月16日</td>
- </tr>
- <tr>
- <td><input type="checkbox" name="all" οnclick="checkAll(this)"/>全选</td>
- <td colspan="3">
- <!--
- <input type="button" value="全选" οnclick="checkAllByBtn1(true)">
- <input type="button" value="取消全选" οnclick="checkAllByBtn1(false)">
- <input type="button" value="反选" οnclick="checkAllByBtn2()">
- -->
- <input type="button" value="全选" οnclick="checkAllByBtn(1)">
- <input type="button" value="取消全选" οnclick="checkAllByBtn(0)">
- <input type="button" value="反选" οnclick="checkAllByBtn(2)">
- <input type="button" value="删除所选邮件" οnclick="deleteMail()">
- </td>
- </tr>
- </table>
- </body>
- </html>