day15-JavaScript Dom模态对话框，全选反选

一、导语

　　当我们点击添加按钮的时候，我们想弹出一个对话框，这个对话框，有我们想要界面，这个叫模态对话框，那这个是怎么实现的呐，能达到什么效果呢？

二、达到的效果

 

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7          .hild{
  8             display: none;
  9             }
 10         .c1{
 11             position: fixed;
 12             top:0;
 13             left: 0;
 14             right: 0;
 15             bottom: 0;
 16             background-color: black;
 17             opacity:0.6;
 18             z-index: 9;
 19             }
 20         .c2{
 21             border: 1px red solid;            ;
 22             width: 500px;
 23             height: 400px;
 24             background-color:white;
 25             position:fixed;
 26             left:50%;
 27             top: 50%;
 28             margin-top: -200px;
 29             margin-left: -250px;
 30             z-index: 10;
 31         }
 32 
 33     </style>
 34 
 35 </head>
 36 <body style="margin: 0;">
 37     <div>
 38         <input type="button" value="添加" onclick="tanchu();" />
 39         <table>
 40             <thead>
 41                 <tr>
 42                     <th>请选择</th>
 43                     <th>主机名</th>
 44                     <th>端口</th>
 45                 </tr>
 46             </thead>
 47             <tbody  id="tb">
 48                 <tr>
 49                     <td><input type="checkbox"></td>
 50                     <td>1.1.1.1</td>
 51                     <td>22</td>
 52                 </tr>
 53                 <tr>
 54                     <td><input type="checkbox"></td>
 55                     <td>2.2.2.2</td>
 56                     <td>22</td>
 57                 </tr>
 58             </tbody>
 59         </table>
 60         <div>
 61             <input type="button" value="全选" onclick="choseAll(); " />
 62             <input type="button" value="取消" onclick="cancleAll(); " />
 63             <input type="button" value="反选" onclick="reverseAll(); " />
 64         </div>
 65     </div>
 66 
 67     <!--&lt;!&ndash;遮罩层&ndash;&gt;-->
 68     <div id="i1" class="c1 hild ">
 69         <!--<input type="button" value="取消" onclick="yincang();">-->
 70     </div>
 71 
 72     <!--弹出框-->
 73     <div id="i2" class="c2 hild">
 74         <p><input type="text" /></p>
 75         <p><input type="text" /></p>
 76         <p>
 77             <input type="button" value="确定" />
 78             <input type="button" value="取消" onclick="yincang();"/>
 79         </p>
 80 
 81     </div>
 82 
 83     <script>
 84         function tanchu(){
 85             document.getElementById("i1").classList.remove('hild');
 86             document.getElementById("i2").classList.remove('hild');
 87         }
 88         function yincang(){
 89              document.getElementById("i1").classList.add('hild');
 90              document.getElementById("i2").classList.add('hild');
 91         }
 92         function choseAll(){
 93             var tbody=document.getElementById("tb");
 94 
 95             var tr_list = tbody.children;
 96             for (var i in tr_list){
 97                 var current_tr =tr_list[i];
 98                 var checkbox= current_tr.children[0].children[0];
 99                 checkbox.checked = true;
100             }
101 
102         }
103         function cancleAll(){
104             var tbody=document.getElementById("tb");
105 
106             var tr_list = tbody.children;
107             for (var i in tr_list){
108                 var current_tr =tr_list[i];
109                 var checkbox= current_tr.children[0].children[0];
110                 checkbox.checked = false;
111             }
112         }
113         function reverseAll(){
114             var tbody=document.getElementById("tb");
115 
116             var tr_list = tbody.children;
117             for (var i in tr_list){
118                 var current_tr =tr_list[i];
119                 var checkbox= current_tr.children[0].children[0];
120                 if (checkbox.checked ==false){
121                     checkbox.checked=true
122                 }
123                 else {checkbox.checked=false
124                 }
125 
126         }
127         }
128     </script>
129 </body>
130 </html>

 

posted @ 2018-05-21 15:15  东郭仔  阅读(136)  评论(0)    收藏  举报