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>

 

posted @ 2018-05-30 17:33  东郭仔  阅读(221)  评论(0编辑  收藏  举报