二话不说开撸作业

作业要求：

后台管理平台 ，编辑表格：
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. bootstrap 操作提示placeholder

    Javascript 部分 function checkForDefaultAlertPlaceholder() { if ($("#alertPlaceholder").leng ...

  2. 多线程实现方式---实现Runnable接口

    多线程实现方式---实现Runnable接口 一个类如果需要具备多线程的能力,也可以通过实现java.lang.Runnable接口进行实现.按照Java语言的语法,一个类可以实现任意多个接口,所以该 ...

  3. Java基础学习-extends继承（成员变量，局部变量，成员方法）

    package extend; /*面向对象-继承: * 多个类的共同成员变量和成员方法.抽取到另一个类中(父类),我们多个类就可以访问到父类的成员了 * */ class Game{ String ...

  4. 血的教训 password写成passward,教训应该从首页赋值 参数名

    血的教训 password写成passward,教训应该从首页赋值 参数名

  5. [置顶] Android 关于ToolBar分分钟玩死自己？

    场景一: 今天早上十点高高兴兴的跟平时早上一样买一杯粥然后一边喝着一边去上班,步行了15分钟到了公司,然后打指纹开门,然后就愉快的写代码了,我擦,好想电脑没开机,我晕好像没带眼镜,发现最近记性不是很好 ...

  6. Windows手动安装Apache，MySql服务

    绿色版的Apache,Mysql需要以服务方式运行.或者由于某种原因服务管理器里面没有服务项了,可以进行手工注册服务和启并服务. # Apache Apache进到安装目录的bin目录下,运行dos命 ...

  7. 伪元素:target

    :target 伪类选择器 :target 是 CSS3 新增的一个伪类,可用于选取当前活动的目标元素.当 URL 末尾带有锚名称 #,就可以指向文档内某个具体的元素.这个被链接的元素就是目标元素(t ...

  8. 牛客国庆集训派对Day1：J：Princess Principal（栈模拟求括号匹配）

    题目描述 阿尔比恩王国(the Albion Kingdom)潜伏着一群代号“白鸽队(Team White Pigeon)”的间谍.在没有任务的时候,她们会进行各种各样的训练,比如快速判断一个文档有没 ...

  9. 微软原版WINDOWS10-LTSB-X64位操作系统的全新安装与优化

    原版WINDOWS10_LTSB_X64位操作系统,安装U盘的制作 1.在一台能正常运行的电脑上,下载原版WINDOWS10_LTSB_X64位操作系统镜像(ISO)文件: 2.运行UltraISO. ...

  10. 重温CLR（四）基元类型、引用类型、值类型

    编程语言的基元类型 编译器直接支持的数据类型称为基元类型(primitive type).基元类型直接映射到framework类型(fcl)中存在的类型. 下表列出fcl类型 从另一个角度,可以认为C ...