1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="biaoge_css.css"> 7 </head> 8 <body> 9 <!--顶部菜单--> 10 <div class="pag-head"> 11 <div class="meun_top"> 12 <a href="" class="meuns_top">顶部菜单一</a> 13 <a href="" class="meuns_top">顶部菜单二</a> 14 <a href="" class="meuns_top">顶部菜单三</a> 15 <a href="" class="meuns_top">顶部菜单四</a> 16 <a href="" class="meuns_top">顶部菜单五</a> 17 <a href="" class="meuns_top">顶部菜单六</a> 18 </div> 19 <div class="clear_div"> 20 </div> 21 </div> 22 <!--下方大框--> 23 <div class="pag-cent"> 24 <!--左边菜单--> 25 <div class="left-meun"> 26 <div class="item"> 27 <div id="i1" class="meuns">菜单1</div> 28 <div class="content"> 29 <div>内容1</div> 30 <div>内容1</div> 31 <div>内容1</div> 32 <div>内容1</div> 33 </div> 34 </div> 35 36 <div class="item"> 37 <div id="i2" class="meuns">菜单2</div> 38 <div class="content hide"> 39 <div>内容2</div> 40 <div>内容2</div> 41 <div>内容2</div> 42 <div>内容2</div> 43 </div> 44 </div> 45 46 <div class="item"> 47 <div id="i3" class="meuns">菜单3</div> 48 <div class="content hide"> 49 <div>内容3</div> 50 <div>内容3</div> 51 <div>内容3</div> 52 <div>内容3</div> 53 </div> 54 </div> 55 56 <div class="item"> 57 <div id="i4" class="meuns">菜单4</div> 58 <div class="content hide"> 59 <div>内容4</div> 60 <div>内容4</div> 61 <div>内容4</div> 62 <div>内容4</div> 63 64 </div> 65 66 </div> 67 68 </div> 69 <!--右边内容--> 70 <div class="big-content"> 71 <div class="content_right"> 72 <div class="hosts"> 73 <div class="right-menu"> 74 <input type="button" id='add' value="添加" > 75 <input type="button" id="all" value="全选" > 76 <input type="button" id="remov" value="取消" > 77 <input type="button" id="rest" value="反选" > 78 <div class="edits" id="ed" name='none'> 79 点击：进入编辑模式 80 </div> 81 </div> 82 83 <table border="1" id="tab"> 84 <thead> 85 <tr> 86 <th>选择</th> 87 <th>主机</th> 88 <th>端口</th> 89 <th>ip</th> 90 <th>操作</th> 91 </tr> 92 </thead> 93 <tbody id="tb"> 94 95 <tr> 96 <td><input type="checkbox" as='true'></td> 97 <td tag='hostname'>主机一</td> 98 <td tag='port'>8080</td> 99 <td tag='ip'>192.168.11.1</td> 100 <td tag='olin'> 101 <select name="ol" class="heds"> 102 <option value="在线">在线</option> 103 <option value="下线">下线</option> 104 </select> 105 <a>在线</a> 106 </td> 107 <tr> 108 <td><input type="checkbox" as='true'></td> 109 <td tag='hostname'>主机二</td> 110 <td tag='port'>8080</td> 111 <td tag='ip'>192.168.12.2</td> 112 <td tag='olin'> 113 <select name="ol" class="heds"> 114 <option value="在线">在线</option> 115 <option value="下线">下线</option> 116 </select> 117 <a>下线</a> 118 </td> 119 </tr> 120 <tr> 121 <td><input type="checkbox" as='true'></td> 122 <td tag='hostname'>主机三</td> 123 <td tag='port'>8080</td> 124 <td tag='ip'>192.168.13.3</td> 125 <td tag='olin'> 126 <select name="ol" class="heds"> 127 <option value="在线">在线</option> 128 <option value="下线">下线</option> 129 </select> 130 <a>下线</a> 131 </td> 132 </tr> 133 </tbody> 134 </table> 135 </div> 136 </div> 137 <!--遮罩层--> 138 <div class="c1 heds" id="z-cent"></div> 139 <!--对话框--> 140 <div class="c2 heds" id="z-first"> 141 <form class="z-z"> 142 <lable>主 机：</lable> 143 <input type="text" name="hostname" id="hosts" value=""><br /><br /> 144 <lable>端 口：</lable> 145 <input type="text" name="port" id="ports" value=""><br /><br /> 146 <lable>I P：</lable> 147 <input type="text" name="ip" id="ips" value=""><br /> 148 <hr /> 149 <input type="button" name="" id="cre" value="确定" > 150 <input type="button" id="gb" value="关闭"> 151 </form> 152 </div> 153 </div> 154 </div> 155 <div class="pa-top" onclick="topy();"></div> 156 157 <script src="jquery-3.2.1.js"></script> 158 <script > 159 //单个勾选 160 $('#tb tr td').delegate('input[type="checkbox"]','click',function () { 161 console.log($(this).prop('checked')); 162 if($('#ed').attr('as')&& $(this).prop('checked')){ 163 edi_a(this); 164 }else if($('#ed').attr('as')&& $(this).prop('checked')==false){ 165 edi_b(this); 166 } 167 }); 168 169 //进入函数 170 function edi_a (self) { 171 $(self).attr('as','false'); 172 $(self).parent().nextUntil('[tag="olin"]').each(function () { 173 var v=$(this).text(); 174 $(this).empty(); 175 var new_v=$(this).append("<input type='text' value='"+v+"'>"); 176 }); 177 var s=$(self).parent().nextAll('[tag="olin"]').children(); 178 s.each(function () { 179 $(this).removeClass('heds'); 180 $(this).next().remove(); 181 }); 182 } 183 184 //退出函数 185 function edi_b (self) { 186 $(self).attr('as','true');//设置是否编辑状态 187 $(self).parent().nextUntil('[tag="olin"]').each(function (){ 188 var v=$(this).find('input').val(); 189 $(this).find('input').remove('input'); 190 $(this).text(v); 191 }); 192 var s=$(self).parent().nextAll('[tag="olin"]').children(); 193 s.each(function () { 194 $(this).addClass('heds'); 195 var ol=$(this).val(); 196 var n='<a>'+ol+'</a>'; 197 $(this).after(n); 198 }); 199 } 200 201 ////编辑模式判断 202 $('.right-menu').delegate('.edits','click',function(){ 203 if($(this).hasClass('edits-2')){ 204 $(this).removeClass('edits-2'); 205 $(this).text('点击：进入编辑模式'); 206 $(this).removeAttr('as'); 207 editlistz () 208 }else{ 209 $(this).addClass('edits-2'); 210 $(this).text('点击：退出编辑模式'); 211 $(this).attr('as','disp'); 212 editlist(); 213 } 214 }); 215 216 //退出编辑框函数 217 function editlistz () { 218 $('#tb tr').find('input[type="checkbox"]').each(function() { 219 if ($(this).prop('checked')) { 220 edi_b(this); 221 } 222 }); 223 } 224 225 //进入编辑框函数 226 function editlist () { 227 $('#tb tr').find('input[type="checkbox"]').each(function() { 228 if ($(this).prop('checked')) { 229 //$(this).attr('as','false'); 230 edi_a(this); 231 } 232 }); 233 } 234 235 //批量上下线 236 $('#tb tr td').delegate('select[name="ol"]','click',function () { 237 $(this).keydown(function (event) { 238 if (event.keyCode==17&& $(this).mousedown()){ 239 var ol=$(this).val(); 240 var m=$(this).parent().parent().siblings(); 241 m.each(function () { 242 // 子级 243 if ($(this).find('input[as="false"]').prop('checked')) { 244 ($(this).children().find('[name="ol"]').val(ol)); 245 } 246 }); 247 return false; 248 } 249 }); 250 }); 251 252 //左侧菜单js 点击函数 253 $('.meuns').click(function(){ 254 //当前点击的标签 255 $(this).next().removeClass('hide'); 256 $(this).parent().siblings().find('.content').addClass('hide') 257 }); 258 259 //返回顶部 260 function topy(){ 261 document.body.scrollTop=0; 262 } 263 //显示对话框 264 $('#add').click(function(){ 265 $('#z-cent,#z-first').removeClass('heds'); 266 $('.z-z input[type="text"]').val(''); 267 }); 268 269 //关闭对话框 270 $('#gb').click(function(){ 271 $('#z-cent,#z-first').addClass('heds'); 272 }); 273 274 //添加主机 IP 275 $('#cre').click(function(){ 276 var flag=true;//默认提交 277 $('error').remove(); 278 $('.z-z').find('input[type="text"]').each(function () { 279 var v=$(this).val(); 280 if(v.length<=0){ 281 flag=false; 282 var tag =document.createElement('span'); 283 tag.className='error'; 284 tag.innerHTML='不能为空'; 285 $(this).after(tag); 286 } 287 }); 288 if(flag==true){ 289 var host=$('#hosts').val();//主机名 290 var port=$('#ports').val();//端口 291 var ip=$('#ips').val();//ip 292 var tab=$('#tab');//获取页面表格 293 var newtr='<tr><td><input type="checkbox" as="true"></td><td>'+host+'</td><td>'+port+'</td><td>'+ip 294 +'</td><td tag="olin"><select name="ol" class="heds"><option value="在线">在线' + 295 '</option><option value="下线">下线</option></select><a>在线</a></td></tr>'; 296 $(tab).append(newtr); 297 $('#z-cent,#z-first').addClass('heds');//添加 类名 样式 298 } 299 }); 300 301 302 //全选 303 $('#all').click(function (){ 304 $(':checkbox').prop('checked',true).each(function () { 305 if ($('#ed').attr('as')&& $(this).attr('as')=='true') {//判断是否是编辑模式,, 306 edi_a(this); 307 } 308 309 }); 310 311 }); 312 313 //取消 314 $('#remov').click(function (){ 315 $(':checkbox').prop('checked',false).each(function () { 316 if ($('#ed').attr('as')&& $(this).attr('as')=='false') { 317 edi_b(this); 318 } 319 }) 320 }); 321 322 //反选 323 324 $('#rest').click(function (){ 325 $('#tb :checkbox').each(function(){ 326 var v=$(this).prop('checked')?false:true; 327 $(this).prop("checked",v); 328 if(v==true){ 329 if ($('#ed').attr('as')&& $(this).attr('as')=='true') {//如果是编辑模式 并且 处于锁定状态 330 edi_a(this);//进入编辑 331 } 332 }else{ 333 if ($('#ed').attr('as')&& $(this).attr('as')=='false') {//如果是编辑模式 并且 处于非锁定状态 334 edi_b(this);//退出编辑 335 } 336 } 337 }); 338 }); 339 </script> 340 </body> 341 </html>
相关文章：