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