二话不说开撸作业

作业要求：

后台管理平台 ，编辑表格：
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. Activity步骤

    Android项目结构 src:Java源代码所在的文件夹 gen:自动生成的R.java所在文件夹 Android开发工具包:android.jar res:资源文件夹,包含3种 drawable: ...

  2. spring import jar中的bean配置文件

    在spring中import resource file,有两种情况:classes目录和jar包 如果资源文件在classes目录: <import resource="classp ...

  3. MySQL 5.7.18 在centos下安装记录

    一个朋友找我如何在linux下安装mysql5.7.18,我稍微整理下了下记录,如下: 下载地址: MySQL5.7.18参数官方网址:https://dev.mysql.com/doc/refman ...

  4. MySQL 福利彩票业务 如何存储毫秒微秒

    朋友在做福利彩票业务,遇到一个存储毫秒微秒数据的需求,问我mysql里面有何解决方案.我脑中一搜索,以前没有关注到,于是去官网查看,找到11.3.6 Fractional Seconds in Tim ...

  5. Arcgis for Js之GeometryService实现测量距离和面积

    距离和面积的测量时GIS常见的功能,在本节,讲述的是通过GeometryService实现测量面积和距离.先看看实现后的效果:                                  距离 ...

  6. 防止前端脚本JavaScript注入

    在使用ajax进行留言的时候,出现了一个问题.因为留言内容写完之后,通过ajax提交内容,同时使用js把留言的内容添加到页面上来.浏览留言的时候也是通过ajax请求,然后再显示的.这样,如果有人在留言 ...

  7. Navicat for MySQL导入.sql文件

    首先,打开Navicat for MySQL,打开需要使用的连接,新建一个数据库名等按自己的需求填写. 打开创建的数据库,在空白处右键,选择运行SQL文件,然后找到.SQL文件所在地址即可. MySQ ...

  8. Windows下安装pillow、opencv库问题，亲测可行

    安装pillow 库 python -m pip install pillow 出自:http://blog.csdn.net/Riverhope/article/details/78766969 安 ...

  9. 为什么要使用ORM技术？和 JDBC 有何不一样?

    为什么要使用ORM技术?和 JDBC 有何不一样?        1.繁琐的代码问题:        用JDBC的API编程访问数据库,代码量较大,特别是访问字段较多的表的时候,代码显得繁琐.累赘,容 ...

  10. WCF NetTcpBinding 由于系统缓冲区空间不足或队列已满，不能执行套接字上的操作

    背景:WindowsService + WCF + NetTcpBinding 之前一直使用http协议模式,改为net.tcp之后隔段时间出现:由于系统缓冲区空间不足或队列已满,不能执行套接字上的操 ...