zoukankan      html  css  js  c++  java
  • day16作业 后台管理

    二话不说开撸作业

    作业要求:

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

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

      1 <!DOCTYPE html>
      2 <html>
      3 <head lang="en">
      4     <meta charset="UTF-8">
      5     <title>主机后台管理程序</title>
      6     <link rel="icon" href="image/link.jpg">
      7     <style>
      8         .body{
      9             margin: 0 auto;
     10         }
     11         .pg-header{
     12             height: 60px;
     13             width: 90%;
     14             line-height: 60px;
     15             text-align: center;
     16             /*background-color: #dddddd;*/
     17             /*margin-left: 30%;*/
     18         }
     19         .pg-content{
     20             margin-left:30%
     21         }
     22         .edit{
     23             cursor: pointer;
     24             width: 108px;
     25             background-color: #989898;
     26             height: 20px;
     27             line-height: 20px;
     28             text-align: center;
     29             margin-left: 15px;
     30         }
     31         .editing{
     32             background-color: brown;
     33         }
     34 
     35     </style>
     36 
     37 </head>
     38 <body class="body">
     39     <div class="pg-header">
     40         <h1>主机后台管理程序</h1>
     41     </div>
     42     <div class="pg-content">
     43         <table border="1" class="tab1">
     44             <thead>
     45                 <tr>
     46                     <th>选项</th>
     47                     <th>主机IP</th>
     48                     <th>端口</th>
     49                     <th>状态</th>
     50                 </tr>
     51             </thead>
     52             <tbody>
     53                 <tr>
     54                     <td><input type="checkbox"></td>
     55                     <td><input type="text"  disabled="disabled" value="1.1.1.1"></td>
     56                     <td><input type="text" disabled="disabled" value="22"></td>
     57                     <td>
     58                         <select disabled="true">
     59                             <option selected="selected">在线</option>
     60                             <option>下线</option>
     61                         </select>
     62                     </td>
     63                 </tr>
     64                 <tr>
     65                     <td><input type="checkbox"></td>
     66                     <td><input type="text" disabled="disabled" value="2.2.2.2"></td>
     67                     <td><input type="text" disabled="disabled" value="22"></td>
     68                     <td>
     69                         <select disabled="true">
     70                             <option selected="selected">在线</option>
     71                             <option>下线</option>
     72                         </select>
     73                     </td>
     74                 </tr>
     75                 <tr>
     76                      <td><input type="checkbox"></td>
     77                     <td><input type="text" disabled="disabled" value="3.3.3.3"></td>
     78                     <td><input type="text" disabled="disabled" value="23"></td>
     79                     <td>
     80                         <select disabled="true">
     81                             <option selected="selected">在线</option>
     82                             <option>下线</option>
     83                         </select>
     84                     </td>
     85                 </tr>
     86                 <tr>
     87                      <td><input type="checkbox"></td>
     88                     <td><input type="text" disabled="disabled" value="5.5.5.5"></td>
     89                     <td><input type="text" disabled="disabled" value="8080"></td>
     90                     <td>
     91                         <select disabled="true">
     92                             <option selected="selected">在线</option>
     93                             <option>下线</option>
     94                         </select>
     95                     </td>
     96                 </tr>
     97                 <tr>
     98                      <td><input type="checkbox"></td>
     99                     <td><input type="text" disabled="disabled" value="6.6.6.6"></td>
    100                     <td><input type="text" disabled="disabled" value="22"></td>
    101                     <td>
    102                         <select disabled="true">
    103                             <option>在线</option>
    104                             <option selected="selected">下线</option>
    105                         </select>
    106                     </td>
    107                 </tr>
    108             </tbody>
    109         </table>
    110         <input type="button" value="全选" id="check_all">
    111         <input type="button" value="反选" id="reverse_all">
    112         <input type="button" value="取消" id="cancle_all">
    113         <p></p>
    114         <div class="edit" id="edit">进入编辑模式</div>
    115     </div>
    116     <script src="jq.js"></script>
    117     <script>
    118 //        全选功能
    119         $("#check_all").click(function(){
    120             if ($("#edit").attr("class").indexOf("editing")==-1) {
    121                 $("input[type='checkbox']").prop('checked', true);
    122             }else{
    123                 $("input[type='checkbox']").prop('checked', true);
    124                 $("input[type='checkbox']").each(function(v){
    125                     var tag = $(this).parent().nextAll();
    126                     $(tag[0].children).removeAttr("disabled");
    127                     $(tag[1].children).removeAttr("disabled");
    128                     $(tag[2].children).removeAttr("disabled");
    129                 })
    130             }
    131         });
    132 
    133 //       反选功能
    134         $("#cancle_all").click(function(){
    135            if ($("#edit").attr("class").indexOf("editing")==-1) {
    136                $("input[type='checkbox']").prop('checked', false);
    137            }else{
    138                $("input[type='checkbox']").prop('checked', false);
    139                $("input[type='checkbox']").each(function(v){
    140 //                   console.log(this);
    141                     var tag = $(this).parent().nextAll();
    142                     $(tag[0].children).attr("disabled","disabled");
    143                     $(tag[1].children).attr("disabled","disabled");
    144                     $(tag[2].children).attr("disabled","disabled");
    145                    $("#edit").removeClass("editing");
    146                    $("#edit")[0].innerText="进入编辑模式"
    147                     $("#edit").bind('click',editing);
    148                })
    149            }
    150         });
    151 
    152 //     取消键功能
    153         $("#reverse_all").click(function(){
    154             if ($("#edit").attr("class").indexOf("editing")==-1) {
    155                 $('input[type="checkbox"]').each(function (k) {
    156                     if (this.checked) {
    157                         this.checked = false
    158                     } else {
    159                         this.checked = true
    160                     }
    161                 })
    162             }else{
    163                 $('input[type="checkbox"]').each(function (k) {
    164                     if (this.checked) {
    165                         this.checked = false;
    166                          var tag = $(this).parent().nextAll();
    167                         $(tag[0].children).attr("disabled","disabled");
    168                         $(tag[1].children).attr("disabled","disabled");
    169                         $(tag[2].children).attr("disabled","disabled");
    170                     } else {
    171                         this.checked = true;
    172                          var tag = $(this).parent().nextAll();
    173                         $(tag[0].children).removeAttr("disabled");
    174                         $(tag[1].children).removeAttr("disabled");
    175                         $(tag[2].children).removeAttr("disabled");
    176                     }
    177                 })
    178             }
    179         });
    180 
    181 //        进入编辑模式绑定事件
    182         $("#edit").bind('click',editing);
    183 
    184         function editing(){
    185             $(this).addClass("editing");
    186             this.innerText="编辑中。。。";
    187 //            解除绑定
    188             $("#edit").unbind('click',editing);
    189             $("input[type='checkbox']").each(function(a) {
    190                 if (this.checked) {
    191                     var tag = $(this).parent().nextAll();
    192                     $(tag[0].children).removeAttr("disabled");
    193                     $(tag[1].children).removeAttr("disabled");
    194                     $(tag[2].children).removeAttr("disabled");
    195                 }
    196             })
    197         }
    198 
    199 // 在编辑模式下,和非编辑模式下,选择单个功能
    200        $("input[type='checkbox']").click(function(c){
    201 //                console.log(1,this);
    202             if ($("#edit").attr("class").indexOf("editing") != -1) {
    203 //                console.log(2,this);
    204                if(this.checked){
    205                     var tag = $(this).parent().nextAll();
    206                     $(tag[0].children).removeAttr("disabled");
    207                     $(tag[1].children).removeAttr("disabled");
    208                     $(tag[2].children).removeAttr("disabled");
    209 
    210                }else{
    211                     var tag = $(this).parent().nextAll();
    212                     $(tag[0].children).attr("disabled","disabled");
    213                     $(tag[1].children).attr("disabled","disabled");
    214                     $(tag[2].children).attr("disabled","disabled");
    215                }
    216 
    217             }else{}
    218         });
    219 
    220     </script>
    221 </body>
    222 </html>
  • 相关阅读:
    SSH Secure File Transfer上传文件错误:encountered 1 errors during the transfer解决办法
    出现Unrecognized field "state" (class com.jt.manage.pojo.ItemCat)异常
    (error) DENIED Redis is running in protected mode because protected mode is enabled
    错误:在maven install是抛出 “1.5不支持diamond运算符,请使用source 7或更高版本以启用diamond运算符”
    Java实现POI读取Excel文件,兼容后缀名xls和xlsx
    数据库的主从复制常用Xshell命令
    Linux搭建主从数据库服务器(主从复制)
    项目数据库备份
    Entity Frameword 查询 sql func linq 对比
    jq 选择器基础及拓展
  • 原文地址:https://www.cnblogs.com/chenkeven/p/9112207.html
Copyright © 2011-2022 走看看