二话不说开撸作业

作业要求：

后台管理平台 ，编辑表格：
1. 非编辑模式：
可对每行进行选择； 反选； 取消选择
2. 编辑模式:
进入编辑模式时如果行被选中，则被选中的行万变为可编辑状态，未选中的不改变
退出编辑模式时，所有的行进入非编辑状态
处于编辑模式时，行被选中则进入编辑状态，取消选择则进入非编辑状态

需要导入 jquery  , 版本：1.2.。

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>主机后台管理程序</title>

     <link rel="icon" href="image/link.jpg">

     <style>

         .body{

             margin: 0 auto;

         }

         .pg-header{

             height: 60px;

             width: 90%;

             line-height: 60px;

             text-align: center;

             /*background-color: #dddddd;*/

             /*margin-left: 30%;*/

         }

         .pg-content{

             margin-left:30%

         }

         .edit{

             cursor: pointer;

             width: 108px;

             background-color: #989898;

             height: 20px;

             line-height: 20px;

             text-align: center;

             margin-left: 15px;

         }

         .editing{

             background-color: brown;

         }

     </style>

 </head>

 <body class="body">

     <div class="pg-header">

         <h1>主机后台管理程序</h1>

     </div>

     <div class="pg-content">

         <table border="1" class="tab1">

             <thead>

                 <tr>

                     <th>选项</th>

                     <th>主机IP</th>

                     <th>端口</th>

                     <th>状态</th>

                 </tr>

             </thead>

             <tbody>

                 <tr>

                     <td><input type="checkbox"></td>

                     <td><input type="text"  disabled="disabled" value="1.1.1.1"></td>

                     <td><input type="text" disabled="disabled" value="22"></td>

                     <td>

                         <select disabled="true">

                             <option selected="selected">在线</option>

                             <option>下线</option>

                         </select>

                     </td>

                 </tr>

                 <tr>

                     <td><input type="checkbox"></td>

                     <td><input type="text" disabled="disabled" value="2.2.2.2"></td>

                     <td><input type="text" disabled="disabled" value="22"></td>

                     <td>

                         <select disabled="true">

                             <option selected="selected">在线</option>

                             <option>下线</option>

                         </select>

                     </td>

                 </tr>

                 <tr>

                      <td><input type="checkbox"></td>

                     <td><input type="text" disabled="disabled" value="3.3.3.3"></td>

                     <td><input type="text" disabled="disabled" value="23"></td>

                     <td>

                         <select disabled="true">

                             <option selected="selected">在线</option>

                             <option>下线</option>

                         </select>

                     </td>

                 </tr>

                 <tr>

                      <td><input type="checkbox"></td>

                     <td><input type="text" disabled="disabled" value="5.5.5.5"></td>

                     <td><input type="text" disabled="disabled" value="8080"></td>

                     <td>

                         <select disabled="true">

                             <option selected="selected">在线</option>

                             <option>下线</option>

                         </select>

                     </td>

                 </tr>

                 <tr>

                      <td><input type="checkbox"></td>

                     <td><input type="text" disabled="disabled" value="6.6.6.6"></td>

                     <td><input type="text" disabled="disabled" value="22"></td>

                     <td>

                         <select disabled="true">

                             <option>在线</option>

                             <option selected="selected">下线</option>

                         </select>

                     </td>

                 </tr>

             </tbody>

         </table>

         <input type="button" value="全选" id="check_all">

         <input type="button" value="反选" id="reverse_all">

         <input type="button" value="取消" id="cancle_all">

         <p></p>

         <div class="edit" id="edit">进入编辑模式</div>

     </div>

     <script src="jq.js"></script>

     <script>

 //        全选功能

         $("#check_all").click(function(){

             if ($("#edit").attr("class").indexOf("editing")==-1) {

                 $("input[type='checkbox']").prop('checked', true);

             }else{

                 $("input[type='checkbox']").prop('checked', true);

                 $("input[type='checkbox']").each(function(v){

                     var tag = $(this).parent().nextAll();

                     $(tag[0].children).removeAttr("disabled");

                     $(tag[1].children).removeAttr("disabled");

                     $(tag[2].children).removeAttr("disabled");

                 })

             }

         });

 //       反选功能

         $("#cancle_all").click(function(){

            if ($("#edit").attr("class").indexOf("editing")==-1) {

                $("input[type='checkbox']").prop('checked', false);

            }else{

                $("input[type='checkbox']").prop('checked', false);

                $("input[type='checkbox']").each(function(v){

 //                   console.log(this);

                     var tag = $(this).parent().nextAll();

                     $(tag[0].children).attr("disabled","disabled");

                     $(tag[1].children).attr("disabled","disabled");

                     $(tag[2].children).attr("disabled","disabled");

                    $("#edit").removeClass("editing");

                    $("#edit")[0].innerText="进入编辑模式"

                     $("#edit").bind('click',editing);

                })

            }

         });

 //     取消键功能

         $("#reverse_all").click(function(){

             if ($("#edit").attr("class").indexOf("editing")==-1) {

                 $('input[type="checkbox"]').each(function (k) {

                     if (this.checked) {

                         this.checked = false

                     } else {

                         this.checked = true

                     }

                 })

             }else{

                 $('input[type="checkbox"]').each(function (k) {

                     if (this.checked) {

                         this.checked = false;

                          var tag = $(this).parent().nextAll();

                         $(tag[0].children).attr("disabled","disabled");

                         $(tag[1].children).attr("disabled","disabled");

                         $(tag[2].children).attr("disabled","disabled");

                     } else {

                         this.checked = true;

                          var tag = $(this).parent().nextAll();

                         $(tag[0].children).removeAttr("disabled");

                         $(tag[1].children).removeAttr("disabled");

                         $(tag[2].children).removeAttr("disabled");

                     }

                 })

             }

         });

 //        进入编辑模式绑定事件

         $("#edit").bind('click',editing);

         function editing(){

             $(this).addClass("editing");

             this.innerText="编辑中。。。";

 //            解除绑定

             $("#edit").unbind('click',editing);

             $("input[type='checkbox']").each(function(a) {

                 if (this.checked) {

                     var tag = $(this).parent().nextAll();

                     $(tag[0].children).removeAttr("disabled");

                     $(tag[1].children).removeAttr("disabled");

                     $(tag[2].children).removeAttr("disabled");

                 }

             })

         }

 // 在编辑模式下，和非编辑模式下，选择单个功能

        $("input[type='checkbox']").click(function(c){

 //                console.log(1,this);

             if ($("#edit").attr("class").indexOf("editing") != -1) {

 //                console.log(2,this);

                if(this.checked){

                     var tag = $(this).parent().nextAll();

                     $(tag[0].children).removeAttr("disabled");

                     $(tag[1].children).removeAttr("disabled");

                     $(tag[2].children).removeAttr("disabled");

                }else{

                     var tag = $(this).parent().nextAll();

                     $(tag[0].children).attr("disabled","disabled");

                     $(tag[1].children).attr("disabled","disabled");

                     $(tag[2].children).attr("disabled","disabled");

                }

             }else{}

         });

     </script>

 </body>

 </html>

day16-作业 后台管理的更多相关文章

  1. 老男孩Day16作业：登录、注册、后台管理页面（动态）

    一.作业需求: 1.后台管理主界面(左边菜单框.(全选.反选)框.返回顶部按钮) 2.老男孩登录.注册页面 二.博客地址:https://www.cnblogs.com/catepython/p/93 ...

  2. 老男孩Day17作业：后台管理平台编辑表格

    一.作业需求: 后台管理平台 ,编辑表格: 1. 非编辑模式: 可对每行进行选择: 反选: 取消选择 2. 编辑模式: 进入编辑模式时如果行被选中,则被选中的行万变为可编辑状态,未选中的不改变 退出编 ...

  3. Day5作业,商城+ATM机+后台管理

    晚来了....东西太多,需要写的blog内容太多,re讲的渣渣,不明白为什么oldboy经常换老师,吐槽下吧,真心不爱了.... github地址在这:https://github.com/ccorz ...

  4. 集成一体化的移动POS开单扫描解决方案--"移动开单掌上POS"。它集后台管理软件

    针对商贸企业的批发.零售管理设计的软硬件集成一体化的移动POS开单扫描解决方案--"移动开单掌上POS".它集后台管理软件.商品价格.库存等信息查询,店铺.展销会开单,移动捡货配送 ...

  5. python 全栈开发，Day83(博客系统子评论,后台管理,富文本编辑器kindeditor,bs4模块)

    一.子评论 必须点击回复,才是子评论!否则是根评论点击回复之后,定位到输入框,同时加入@评论者的用户名 定位输入框 focus focus:获取对象焦点触发事件 先做样式.点击回复之后,定位到输入框, ...

  6. shell作业后台执行的方法

    来思考几种场景: 1.某个脚本需要执行时间比较长,无人值守,可能执行过程中因ssh会话超时而中断? 2.某次测试一段代码,需要临时放入后台运行? 3.放入后台运行的脚本,需要在一段时间后重新调到前台? ...

  7. day20 project+查看新闻列表 + 点赞 + 图片验证码 + 评论和多级评论 + 后台管理 + webSocket + kindEditor

    Day20回顾: 1. 请求生命周期 2. 中间件 md = [ "file_path.classname" ] process_request[可有可无] process_res ...

  8. ASP.NET MVC 实现页落网资源分享网站+充值管理+后台管理（7）之扩展基类和区域创建以及文本编辑配置

    一.扩展基类和区域创建 (1)在应用之前,我们先在表现层创建一个公共的系统扩展文件来(SystemExtension)存放我们需要延伸和扩展的方法类. 在常规的项目系统操作中,我们都需要用到增删查改的 ...

  9. MVC5 网站开发之七 用户功能 1、角色的后台管理

    角色是网站中都有的一个功能,用来区分用户的类型.划分用户的权限,这次实现角色列表浏览.角色添加.角色修改和角色删除. 目录 奔跑吧,代码小哥! MVC5网站开发之一 总体概述 MVC5 网站开发之二 ...

随机推荐

  1. XML的两种解析方式

    JDK提供的XML解析方式分为两种:DOM方式和SAX方式DOM:Document Object Model.需要读取整个XML文档,先需要在内存中构架代表整个DOM树的Document对象,可以进行 ...

  2. WCF基础:绑定(三)

    在WCF绑定体系中,绑定创建绑定元素,绑定元素创建绑定监听器/绑定工厂,绑定监听器/绑定工厂创建信道. WCF中绑定是有多个信道相连组成的信道栈,在这个信道栈中必须包含传输信道和编码信道,而且传输信道 ...

  3. 【zzulioj-1731】矩阵

    题目描述 输入

  4. 【lightoj-1046】Rider(BFS)

    链接:http://www.lightoj.com/volume_showproblem.php?problem=1046 题意: 给m*n的棋盘,数字k代表这个位置上有棋子,并且一步可以连续跳1-k ...

  5. redis memcache rabbitMQ

    Python之路[第九篇]:Python操作 RabbitMQ.Redis.Memcache.SQLAlchemy Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动 ...

  6. File I|O（八）

    1.I/O:input/output 1.1.java.io.File 表示:文件或者文件夹(目录) File f=new File("文件路径") 注意:相对路径:非web项目的 ...

  7. Is possible develop iOS game with Delphi Xe4 ? Pascal

    下面的计划: 评估用Delphi XE4来开发游戏的可行性. 以及成本. (代价过大的话 估计还是不会被接受 所以某个角度来说这是个玩具) . 有几个选择, Asphyre 4.0 之后作者lifep ...

  8. golang包快速生成base64验证码

    base64Captcha快速生成base64编码图片验证码字符串 支持多种样式,算术,数字,字母,混合模式,语音模式. Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一.Base6 ...

  9. Oracle新用户以及授权的若干问题

    Database 实验4 问题: 授权语句 grant create table to user_name; 收回授权语句 revoke create table from user_name; 注意 ...

  10. squid http_access中的逻辑关系

    http_access通过acl实现访问控制,方法 acl A acltype argument acl B acltype argument 逻辑关系:或 http_access allow|den ...