目录结构
后台管理平台 ├ 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>