python第九十一天----第十六周作业 

实现功能:
1、非编辑模式
    ​    可以对每行进行选择，全选，取消，反选 ；
2、编辑模式
    ​   进入编辑模式时:
            如果行被选中，则被选中的行变为可编辑状态，未选中则不改变
    ​   退出编辑模式时:
            保存所有的行的修改并进入非编辑状态
    ​   单个勾选: 
            勾上时: 进入编辑状态
            去勾时: 保存所在行的修改进入非编辑状态
    ​   全选时: 
            所有行进入编辑状态
       取消是: 
               所有行保存修改进入非编辑状态
       反选时: 
               被选中的行 
                   取消勾选 保存修改进入非编辑状态
               未被选中的行 
                   进行勾选 进入编辑状态 
           批量上下线:
               按住CTRL键 点击上下线的下拉项,可以批量进行设置上下线 被选中的行进行统一的设置
3、添加主机
    可以添加主机

详细代码:

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>编辑框功能</title>
  6     
  7     <style type="text/css">
  8         /*顶部菜单*/
  9         .pag-head{
 10             position: fixed;
 11             z-index: 7;
 12             top: 0;
 13             left: 0;
 14             right: 0;
 15             height: 48px;
 16             width: 100%;
 17             background: #005EA7;
 18             
 19         }
 20         .meun_top{
 21             height: 48px;
 22             line-height: 48px;
 23             width: 960px;
 24             /*border: 1px solid red;*/
 25             margin: 0 auto;
 26         }
 27             /*顶部菜单组*/
 28         .meuns_top{
 29             text-decoration: none;
 30             color: white;
 31             padding: 0px 10px 0px 10px;
 32             display: inline-block;
 33         }
 34         .meuns_top:hover{
 35             background-color: rgba(64,119,203,0.6);
 36         }
 37         
 38         .clear_div{
 39             clear: both;
 40         }
 41         /*顶部菜单结束*/    
 42         
 43         
 44         /*下方大框*/
 45         .pag-cent{
 46             margin-top: 50px;
 47             
 48         }
 49         
 50         
 51         /*左侧菜单*/
 52         .left-meun{
 53             z-index: 8;
 54             position: fixed;
 55             top: 50px;
 56             left: 55px;
 57         }
 58         .meuns{
 59             
 60             background-color: #005EA7;
 61             height: 45px;
 62             width:150px;
 63             color:white;
 64             line-height: 45px;
 65             text-align: center;
 66         }
 67         .meuns:hover{
 68             background-color: rgba(64,119,203,0.6);
 69         }
 70         .hide{
 71             display: none;
 72         }
 73         .content{
 74             margin-left: 65%;
 75         }
 76         .item{
 77             width:150px;
 78         }
 79         /*左侧菜单结束*/
 80         
 81         /*下方右边内容块*/
 82         .big-content{
 83             height: 1000px;
 84             border: 1px solid green;
 85         }
 86         
 87         .content_right{
 88             margin: 0 auto;
 89             height: 800px;
 90             width: 960px;
 91             border: 1px solid blueviolet;
 92         
 93            }
 94            
 95            .hosts{
 96                margin-left: 30px;
 97                margin-top: 20px;
 98            }
 99            table{
100                border-spacing: 1px;
101                margin-top: 8px;
102                }
103         /*遮罩层*/
104         .c1{
105             position: fixed;
106             z-index: 9;
107             /*打开多层样式 fixed模式 定义层级为9*/
108             top:0;
109             right:0;
110             left:0;
111             bottom:0;
112             /*上面表示全覆盖*/
113             background-color: black;
114             /*上面为背景色 为黑  下面为透明度为50%*/
115             opacity: 0.5;
116         }
117         .c2{
118            position: fixed;
119            z-index: 10;
120             /*打开多层样式 fixed模式 定义层级为9*/
121 
122             width:400px;
123             height: 300px;
124             top:50%;
125             left:50%;
126             margin-left: -200px;
127             margin-top: -150px;
128             background-color: white;
129             
130         }
131         .z-z{
132             width: 230px;
133             height: 120px;
134             margin-top: 90px;
135             margin-left: 90px;
136         }
137         
138         .error{
139             color: red;
140         }
141         hr{
142             width: 230px;
143         }
144         #cre{
145             margin-left: 70px;
146         }
147         .heds{
148             /*默认不显示*/
149             display: none;
150         }
151         
152         .right-menu{
153             width: 320px;
154             height: 30px;
155             line-height: 30px;
156         }
157         .edits{
158             float: right;
159             border: 1px solid darkgray;
160             padding: 2px;
161             background-color: #A9A9A9;
162             font-size: 9px;
163         }
164         .edits-2{
165             background-color: orange;
166         }
167         
168         .option-ol{
169             
170         }
171         /*下方右边内容块结束*/
172         
173         
174         /*返回顶部*/
175         .pa-top{
176             width: 68px;
177             height: 48px;
178             position: fixed;
179             right: 25px;
180             bottom: 25px;
181             background-image: url(img/top.png);
182             background-position: -425px -270px ;
183             
184         }
185     </style>
186 </head>
187 <body style="margin: 0">
188     <!--顶部菜单-->
189     <div class="pag-head">
190         <div class="meun_top">
191             <a href="" class="meuns_top">顶部菜单一</a>
192             <a href="" class="meuns_top">顶部菜单二</a>
193             <a href="" class="meuns_top">顶部菜单三</a>
194             <a href="" class="meuns_top">顶部菜单四</a>
195             <a href="" class="meuns_top">顶部菜单五</a>
196             <a href="" class="meuns_top">顶部菜单六</a>            
197         </div>
198         <div class="clear_div">
199             
200         </div>
201         
202     </div>
203     <!--下方大框-->
204     <div class="pag-cent">
205         
206         <!--左边菜单-->
207         <div class="left-meun">
208             <div class="item">
209                 <div id="i1"  class="meuns">菜单1</div>
210                     <div class="content">
211                         <div>内容1</div>
212                         <div>内容1</div>
213                         <div>内容1</div>
214                         <div>内容1</div>
215                     </div>
216                 </div>
217             
218             <div class="item">
219                 <div id="i2"  class="meuns">菜单2</div>
220                 <div class="content hide">
221                     <div>内容2</div>
222                     <div>内容2</div>
223                     <div>内容2</div>
224                     <div>内容2</div>
225                 </div>
226             </div>
227             
228             <div class="item">
229                 <div id="i3"  class="meuns">菜单3</div>
230                 <div class="content hide">
231                     <div>内容3</div>
232                     <div>内容3</div>
233                     <div>内容3</div>
234                     <div>内容3</div>
235                 </div>
236             </div>
237             
238             <div class="item">
239                 <div id="i4" class="meuns">菜单4</div>
240                 <div class="content hide">
241                     <div>内容4</div>
242                     <div>内容4</div>
243                     <div>内容4</div>
244                     <div>内容4</div>
245     
246                 </div>
247 
248             </div>
249              
250         </div>
251         
252             
253             
254         <!--右边内容-->
255         <div class="big-content">
256             <div class="content_right">
257                 <div class="hosts">
258                     <div class="right-menu">
259                         <input type="button" id='add' value="添加" >
260                         <input type="button" id="all" value="全选" >
261                         <input type="button" id="remov" value="取消" >
262                         <input type="button" id="rest" value="反选" >
263                         <div class="edits" id="ed" name='none'>
264                             点击：进入编辑模式
265                         </div>
266                     </div>
267                     
268                     <table border="1" id="tab">
269                         <thead>
270                             <tr>
271                                 <th>选择</th>
272                                 <th>主机</th>
273                                 <th>端口</th>
274                                 <th>ip</th>
275                                 <th>操作</th>
276                             </tr>
277                         </thead>
278                         <tbody id="tb">
279         
280                             <tr>
281                                 <td><input type="checkbox" as='true'></td>
282                                 <td tag='hostname'>主机一</td>
283                                 <td tag='port'>1000</td>
284                                 <td tag='ip'>10.10.12.1</td>
285                                    <td tag='olin'>
286                                        <select name="ol" class="heds">
287                                            <option value="在线">在线</option>
288                                            <option value="下线">下线</option>
289                                        </select>
290                                        <a>在线</a>
291                                    </td>     
292                             <tr>
293                                 <td><input type="checkbox" as='true'></td>
294                                 <td tag='hostname'>主机二</td>
295                                 <td tag='port'>1000</td>
296                                 <td tag='ip'>10.10.12.2</td>
297                                 <td tag='olin'>
298                                     <select name="ol" class="heds">
299                                            <option value="在线">在线</option>
300                                            <option value="下线">下线</option>
301                                        </select>
302                                        <a>下线</a>
303                                 </td>     
304                             </tr>
305                             <tr>
306                                 <td><input type="checkbox" as='true'></td>
307                                 <td tag='hostname'>主机三</td>
308                                 <td tag='port'>1000</td>
309                                 <td tag='ip'>10.10.12.3</td>
310                                 <td tag='olin'>
311                                     <select name="ol" class="heds">
312                                            <option value="在线">在线</option>
313                                            <option value="下线">下线</option>
314                                        </select>
315                                        <a>下线</a>
316                                 </td>                                
317                                 
318                             </tr>
319                         </tbody>
320                     </table>
321                 </div>
322             </div>
323             <!--遮罩层-->
324             <div class="c1 heds" id="z-cent"></div>
325             <!--对话框-->
326             <div class="c2 heds" id="z-first">
327                 <form class="z-z">
328                     <lable>主&nbsp;机：</lable>
329                     <input type="text" name="hostname"  id="hosts" value=""><br /><br />
330                     <lable>端&nbsp;口：</lable>
331                     <input type="text" name="port" id="ports" value=""><br /><br />
332                     <lable>I&nbsp;&nbsp;&nbsp;P：</lable>
333                     <input type="text" name="ip" id="ips" value=""><br />
334                     <hr />
335                     <input type="button" name="" id="cre"  value="确定" >
336                     <input type="button" id="gb"  value="关闭">
337                 </form>
338                 
339             </div>
340             
341         </div>
342         
343     </div>
344     
345     
346     
347     <div class="pa-top" onclick="topy();"></div>
348     
349     
350     <script src="jquery-1.11.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
351     
352     <script type="text/javascript">
353         
354         
355         //单个勾选
356         $('#tb tr td').delegate('input[type="checkbox"]','click',function  () {
357             console.log($(this).prop('checked'));
358             if($('#ed').attr('as')&& $(this).prop('checked')){
359                 edi_a(this);    
360             }else if($('#ed').attr('as')&& $(this).prop('checked')==false){
361                 edi_b(this);
362             }
363         })
364         
365         //进入函数
366         function edi_a (self) {
367             $(self).attr('as','false');//设置是否编辑状态
368             $(self).parent().nextUntil('[tag="olin"]').each(function  () {
369                 // 父级    的所有兄弟                查找     属性有 tag  的
370                 var v=$(this).text();//获取内容 
371                 $(this).empty();//清空内容
372                 var new_v=$(this).append("<input type='text' value='"+v+"'>");//添加内容                            
373             })
374             var s=$(self).parent().nextAll('[tag="olin"]').children();//找到下拉菜单标签 
375             s.each(function () {
376                 $(this).removeClass('heds');//移除样式
377                 $(this).next().remove();//清空内容
378             })                
379         }
380         
381         //退出函数
382         function edi_b (self) {
383             $(self).attr('as','true');//设置是否编辑状态
384             $(self).parent().nextUntil('[tag="olin"]').each(function  () {
385                 // 父级    的所有兄弟                查找     属性有 tag  的    
386                 //$(this).attr('as','true');
387                 var v=$(this).find('input').val();//获取内容 
388                 $(this).find('input').remove('input');//    移除        标签        
389                 $(this).text(v);                        
390             })
391             var s=$(self).parent().nextAll('[tag="olin"]').children();//找到下拉菜单标签 
392             s.each(function () {
393                 $(this).addClass('heds');//添加样式
394                 var ol=$(this).val();//获取值
395                 var n='<a>'+ol+'</a>';
396                 $(this).after(n);
397             })                
398         }
399         
400         ////编辑模式判断
401         $('.right-menu').delegate('.edits','click',function(){
402             
403             if($(this).hasClass('edits-2')){
404                 $(this).removeClass('edits-2');//移除样式
405                 $(this).text('点击：进入编辑模式');//改变内容    
406                 $(this).removeAttr('as');//移除属性
407                 editlistz ()
408             }else{
409                 $(this).addClass('edits-2');//添加样式
410                 $(this).text('点击：退出编辑模式');//改变内容    
411                 $(this).attr('as','disp');//添加属性
412                 editlist();//编辑框函数
413             }
414         })
415         
416         //退出编辑框函数
417         function editlistz () {
418             $('#tb tr').find('input[type="checkbox"]').each(function() {//获取表单内容  列表
419                 if ($(this).prop('checked')) {//判断是否打勾
420                     
421                     edi_b(this);            
422                 }
423             })            
424         }
425         
426         //进入编辑框函数
427         function editlist () {
428             $('#tb tr').find('input[type="checkbox"]').each(function() {//获取表单内容  列表
429                 if ($(this).prop('checked')) {//判断是否打勾
430                     //$(this).attr('as','false');
431                     edi_a(this);            
432                 }
433             })            
434         }
435         
436         //批量上下线
437         $('#tb tr td').delegate('select[name="ol"]','click',function  () {
438             $(this).keydown(function  (event) {
439                 if (event.keyCode==17&& $(this).mousedown()){
440                     var ol=$(this).val();//获取值
441                     var m=$(this).parent().parent().siblings();
442                     //     父级              的父级     的所有兄弟
443                     //console.log(m);
444                     m.each(function () {
445                         //   子级
446                         if ($(this).find('input[as="false"]').prop('checked')) {//找到子级 是有选 上的
447                             ($(this).children().find('[name="ol"]').val(ol));//进行赋值
448                         }
449                         
450                     })
451                     return false;
452                 }
453 
454             })
455             
456         })
457         
458         //左侧菜单js 点击函数    
459         $('.meuns').click(function(){
460             //当前点击的标签
461             $(this).next().removeClass('hide');//找到下一个标签  移除样式
462             $(this).parent().siblings().find('.content').addClass('hide')//获取父级,的同级所有兄弟标签 ,查找 其所有下级的类名,添加样式
463         })
464         
465         //返回顶部
466         function topy(){
467             document.body.scrollTop=0;
468         }
469         
470         //显示对话框
471         $('#add').click(function(){
472             $('#z-cent,#z-first').removeClass('heds');//移除类名 样式
473             $('.z-z input[type="text"]').val('');
474         })
475         
476         //关闭对话框    
477         $('#gb').click(function(){
478             $('#z-cent,#z-first').addClass('heds');//添加 类名 样式
479         })
480         
481         //添加主机 IP        
482       $('#cre').click(function(){
483                var flag=true;//默认提交
484             $('.error').remove();//事先移除 提示标签
485             $('.z-z').find('input[type="text"]').each(function  () {//查找 type=text 的input  循环判断
486                 var v=$(this).val();//当前标签的值
487                 if(v.length<=0){
488                     flag=false;//改为不能提交
489                     var tag =document.createElement('span');//创建一个标签
490                     tag.className='error';//添加一个类名
491                     tag.innerHTML='不能为空';
492                     $(this).after(tag);
493                 }
494             })
495             if(flag==true){
496                 var host=$('#hosts').val();//主机名
497                 var port=$('#ports').val();//端口
498                 var ip=$('#ips').val();//ip
499                 var tab=$('#tab');//获取页面表格
500                 var newtr='<tr><td><input type="checkbox" as="true"></td><td>'+host+'</td><td>'+port+'</td><td>'+ip+'</td><td tag="olin"><select name="ol" class="heds"><option value="在线">在线</option><option value="下线">下线</option></select><a>在线</a></td></tr>';
501                 $(tab).append(newtr);
502                 $('#z-cent,#z-first').addClass('heds');//添加 类名 样式
503             }
504        })
505       
506       
507         //全选
508         $('#all').click(function (){
509             $(':checkbox').prop('checked',true).each(function () {
510                 
511                 if ($('#ed').attr('as')&& $(this).attr('as')=='true') {//判断是否是编辑模式,, 
512                     edi_a(this);
513                 }
514                 
515             });
516             
517         })
518             
519         //取消
520         $('#remov').click(function (){
521             $(':checkbox').prop('checked',false).each(function () {
522                 
523                 if ($('#ed').attr('as')&& $(this).attr('as')=='false') {
524                     edi_b(this);
525                 }
526             })
527         })
528         
529         //反选 
530         //通过 each循环  三元运算  操作 写法
531         $('#rest').click(function (){
532             $('#tb :checkbox').each(function(){
533                 var v=$(this).prop('checked')?false:true;//获取值                       
534                 $(this).prop("checked",v);//赋于checkbox 
535                 if(v==true){//判断是否是勾选   勾选再进行判断 
536                     if ($('#ed').attr('as')&& $(this).attr('as')=='true') {//如果是编辑模式  并且 处于锁定状态
537                         edi_a(this);//进入编辑
538                     }
539                 
540                 }else{
541                     if ($('#ed').attr('as')&& $(this).attr('as')=='false') {//如果是编辑模式  并且 处于非锁定状态
542                         
543                         edi_b(this);//退出编辑
544                     }
545                 }
546             })
547             
548         })
549         
550         
551     </script>
552     
553 </body>
554 </html>
View Code

 

posted @ 2017-08-01 11:40  莫柔落切  阅读(682)  评论(0)    收藏  举报