二话不说开撸作业

作业要求：

后台管理平台 ，编辑表格：
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. c#的DateTime.Now详解

    (转自:http://www.cnblogs.com/lida/archive/2011/01/02/1924197.html) //2008年4月24日 System.DateTime.Now.To ...

  2. 【poj2155】Matrix(二维树状数组区间更新+单点查询)

    Description Given an N*N matrix A, whose elements are either 0 or 1. A[i, j] means the number in the ...

  3. 【IDEA】笔记

    引言 IDEA是JAVA开发的一个神器,熟悉它能极大提高我们的开发效率.正所谓工欲善其事,必先利其器. 快捷键 快捷键 介绍 Ctrl + F 在当前文件进行文本查找 (必备) Ctrl + R 在当 ...

  4. Unity3D事件顺序与功能

    Unity3D中所有控制脚本的基类MonoBehaviour有一些虚函数用于绘制中事件的回调,也可以直接理解为事件函数,例如大家都很清楚的Start,Update等函数,以下做个总结. Awake 当 ...

  5. 数据库设计系列之四--ER图

    逻辑设计是做什么? 1.将需求转化为数据库的逻辑模型 2.通过ER图的型式对逻辑模型进行展示 3.同所选用的具体的DBMS系统无关

  6. python考试

    py4测试题 1.8<<2等于?322.通过内置函数计算5除以2的余数 divmod(5,2)3.s=[1,"h",2,"e",[1,2,3],&q ...

  7. Linux各文件及目录说明2018-03-01更新

    本人wechat:YWNlODAyMzU5MTEzMTQ=. *** /etc /etc/sysconfig/network-scripts/ifcfg-eth0 /etc/sysconfig/clo ...

  8. react-redux: async promise

    1.the simple sample action: 事实上,只是返回个一个至少包含type的对象{ },用于reducer接收. import {RECEIVE_DATA} from " ...

  9. GCC参数使用

    gcc and g++分别是gnu的c & c++编译器 gcc/g++在执行编译工作的时候,总共需要4步 1.预处理,生成.i的文件[预处理器cpp] 2.将预处理后的文件不转换成汇编语言, ...

  10. Redis设计与实现 (二): 链表

    Redis实现为双链表结构, 列表键的底层实现之一就是链表,  发布与订阅, 慢查询, 监视器等功能都用到了链表. Redis本身也使用链表维持多个客户端. 节点定义, 位于 adlist.h/lis ...