module06-3-后台管理平台

目录结构

后台管理平台
├ font-awesome-4.7.0
| ├ css
| ├ fonts
| ├ less
| └ scss
├ jquery-1.12.4.min.js
└ 可编辑表格.html

code

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
  7     <style>
  8         table{
  9             table-layout: fixed;
 10         }
 11         tr{
 12             text-align:center;
 13             line-height:20px;
 14             height:20px;
 15         }
 16         td{
 17             overflow: hidden;
 18         }
 19         #edit-toggle{
 20             display:inline-block;
 21             padding:5px 20px;
 22             margin-left:50px;
 23             text-align: center;
 24             background-color: #6a769e;
 25             border-radius: 20px;
 26             color:white;
 27             font-size: 14px;
 28 
 29         }
 30         #edit-toggle:hover , .on{
 31             opacity:0.6;
 32             cursor:pointer;
 33         }
 34         .edit-box{
 35             display:block;
 36             width:100px;
 37             height:20px;
 38             border:none;
 39             padding:0;
 40             text-align: center;
 41             line-height: 20px;
 42         }
 43         .prompt-box{
 44             position:fixed;
 45             left:350px;
 46             top:100px;
 47             background-color: #119911;
 48             padding:5px 10px;
 49             border-radius: 10px;
 50             font-size: 12px;
 51             color:white;
 52         }
 53 
 54     </style>
 55 
 56 </head>
 57 <body>
 58 
 59     <p>
 60         <input type="button" value="全选" id="selectAll">
 61         <input type="button" value="反选" id="reverseAll">
 62         <input type="button" value="取消" id="cancelAll">
 63 
 64         <span id="edit-toggle">进入编辑模式</span>
 65 
 66     </p>
 67 
 68     <table border="1" cellspacing="0" width="300">
 69         <thead>
 70             <tr>
 71                 <td width="50">选择</td>
 72                 <td width="100">主机名</td>
 73                 <td width="100">端口</td>
 74                 <td width="50">状态</td>
 75             </tr>
 76         </thead>
 77 
 78         <tbody id="tb">
 79             <tr>
 80                 <td>
 81                     <input type="checkbox">
 82                 </td>
 83                 <td target="ip">1.1.1.1</td>
 84                 <td target="port">80</td>
 85                 <td target="status">下线</td>
 86             </tr>
 87 
 88             <tr>
 89                 <td>
 90                     <input type="checkbox">
 91                 </td>
 92                 <td target="ip">1.1.1.2</td>
 93                 <td target="port">80</td>
 94                 <td target="status">下线</td>
 95             </tr>
 96 
 97             <tr>
 98                 <td>
 99                     <input type="checkbox">
100                 </td>
101                 <td target="ip">1.1.1.3</td>
102                 <td target="port">80</td>
103                 <td target="status">下线</td>
104             </tr>
105 
106             <tr>
107                 <td>
108                     <input type="checkbox">
109                 </td>
110                 <td target="ip">1.1.1.4</td>
111                 <td target="port">80</td>
112                 <td target="status">下线</td>
113             </tr>
114 
115             <tr>
116                 <td colspan="4">
117                     <i class="fa fa-plus-circle" aria-hidden="true" id="add"></i>
118                 </td>
119             </tr>
120 
121         </tbody>
122 
123     </table>
124 
125 
126     <script src="jquery-1.12.4.min.js"></script>
127     <script>
128         $(function () {
129 //            点击全选按钮触发 全选 事件
130             $('#selectAll').click(function () {
131                 $('#tb :checkbox').prop('checked',true);
132             });
133 
134 //            点击反选按钮触发 反选 事件
135             $('#reverseAll').click(function () {
136                 $('#tb :checkbox').each(function () {
137                     var status = $(this).prop('checked');
138                     $(this).prop('checked',!status);
139                 })
140             });
141 
142 //            点击取消按钮触发 取消选择 事件
143             $('#cancelAll').click(function () {
144                 $('#tb :checkbox').prop('checked',false);
145             });
146 
147 //            点击 进入编辑模式 按钮触发 进入编辑/退出编辑 事件
148             $('#edit-toggle').click(function () {
149 
150                 if($(this).hasClass('on')){
151                     $(this).removeClass('on');
152                     $(this).text('进入编辑模式');
153                     ShowPrompt('已退出编辑模式');
154                     editOff($('#tb :checked'))
155                 }else{
156                     $(this).addClass('on');
157                     $(this).text('退出编辑模式');
158                     ShowPrompt('已进入编辑模式');
159                     editOn($('#tb :checked'))
160                 }
161 
162             });
163 
164 //            编辑模式下， 更改复选框的选中状态 触发 进入编辑/退出编辑 事件
165             $('#tb').delegate(':checkbox','change',function () {
166                 if ($('#edit-toggle').hasClass('on')) {
167                     if ($(this).prop('checked')) {
168                         editOn($(this));
169                     } else {
170                         editOff($(this));
171                     }
172                 }
173             });
174 
175 //            函数：显示 进入/退出编辑模式 的提示框
176             function ShowPrompt(text){
177                 var promptBox = document.createElement('div');
178                 promptBox.classList.add('prompt-box');
179                 promptBox.innerText = text;
180                 $('body').append(promptBox);
181                 var opacity = 1;
182                 var timer = setTimeout(function () {
183                     setInterval(function () {
184                         opacity -= 0.05;
185                         $(promptBox).css('opacity',opacity);
186                     },50);
187                     if(opacity<0){
188                         clearInterval(timer);
189                         promptBox.remove();
190                     }
191                 },1000)
192             }
193 
194 //            函数：进入 编辑模式
195             function editOn(obj) {
196 //                ip 和 port 单元格变成可输入
197                 obj.parent().siblings('[target="ip"],[target="port"]').each(function () {
198                     var input = document.createElement('input');
199                     input.value = $(this).text();
200                     input.className = 'edit-box';
201                     $(this).html('');
202                     $(this).append(input);
203                 });
204 
205 //                状态 单元格变成可输入
206                 obj.parent().siblings('[target="status"]').each(function () {
207                     var d = {
208                         '在线':'0',
209                         '下线':'1'
210                     };
211                     var selectBox = document.createElement('select');
212                     var option0 = document.createElement('option');
213                     option0.innerText = '在线';
214                     option0.value = 0;
215                     var option1 = document.createElement('option');
216                     option1.innerText = '下线';
217                     option1.value = 1;
218                     selectBox.appendChild(option0);
219                     selectBox.appendChild(option1);
220                     selectBox.value = d[$(this).text()];
221                     $(this).html('');
222                     $(this).append(selectBox);
223                 });
224             }
225 
226 //            函数：退出 编辑模式
227             function editOff(obj) {
228                 obj.parent().siblings('[target="ip"],[target="port"]').each(function () {
229                     $(this).text($(this).children('input').val());
230                 });
231 
232                 obj.parent().siblings('[target="status"]').each(function () {
233                     var d={
234                       '0':'在线',
235                       '1':'下线'
236                     };
237                     $(this).text(d[$(this).children('select').val()]);
238                 });
239             }
240 
241 //            点击 添加按钮 触发添加项目事件
242             $('#add').click(function () {
243                 var tr = '<tr><td><input type="checkbox"></td><td target="ip"></td><td target="port"></td><td target="status">下线</td></tr>';
244                 $(this).parent().parent().before(tr);
245             })
246 
247 
248         })
249 
250 
251 
252 
253     </script>
254 
255 </body>
256 </html>

可编辑表格.html