实现功能:
1、非编辑模式
可以对每行进行选择，全选，取消，反选 ；
2、编辑模式
进入编辑模式时:
如果行被选中，则被选中的行变为可编辑状态，未选中则不改变
退出编辑模式时:
保存所有的行的修改并进入非编辑状态
单个勾选:
勾上时: 进入编辑状态
去勾时: 保存所在行的修改进入非编辑状态
全选时:
所有行进入编辑状态
取消是:
所有行保存修改进入非编辑状态
反选时:
被选中的行
取消勾选 保存修改进入非编辑状态
未被选中的行
进行勾选 进入编辑状态
批量上下线:
按住CTRL键 点击上下线的下拉项,可以批量进行设置上下线 被选中的行进行统一的设置
3、添加主机
可以添加主机
详细代码:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>编辑框功能</title> 6 7 <style type="text/css"> 8 /*顶部菜单*/ 9 .pag-head{ 10 position: fixed; 11 z-index: 7; 12 top: 0; 13 left: 0; 14 right: 0; 15 height: 48px; 16 width: 100%; 17 background: #005EA7; 18 19 } 20 .meun_top{ 21 height: 48px; 22 line-height: 48px; 23 width: 960px; 24 /*border: 1px solid red;*/ 25 margin: 0 auto; 26 } 27 /*顶部菜单组*/ 28 .meuns_top{ 29 text-decoration: none; 30 color: white; 31 padding: 0px 10px 0px 10px; 32 display: inline-block; 33 } 34 .meuns_top:hover{ 35 background-color: rgba(64,119,203,0.6); 36 } 37 38 .clear_div{ 39 clear: both; 40 } 41 /*顶部菜单结束*/ 42 43 44 /*下方大框*/ 45 .pag-cent{ 46 margin-top: 50px; 47 48 } 49 50 51 /*左侧菜单*/ 52 .left-meun{ 53 z-index: 8; 54 position: fixed; 55 top: 50px; 56 left: 55px; 57 } 58 .meuns{ 59 60 background-color: #005EA7; 61 height: 45px; 62 width:150px; 63 color:white; 64 line-height: 45px; 65 text-align: center; 66 } 67 .meuns:hover{ 68 background-color: rgba(64,119,203,0.6); 69 } 70 .hide{ 71 display: none; 72 } 73 .content{ 74 margin-left: 65%; 75 } 76 .item{ 77 width:150px; 78 } 79 /*左侧菜单结束*/ 80 81 /*下方右边内容块*/ 82 .big-content{ 83 height: 1000px; 84 border: 1px solid green; 85 } 86 87 .content_right{ 88 margin: 0 auto; 89 height: 800px; 90 width: 960px; 91 border: 1px solid blueviolet; 92 93 } 94 95 .hosts{ 96 margin-left: 30px; 97 margin-top: 20px; 98 } 99 table{ 100 border-spacing: 1px; 101 margin-top: 8px; 102 } 103 /*遮罩层*/ 104 .c1{ 105 position: fixed; 106 z-index: 9; 107 /*打开多层样式 fixed模式 定义层级为9*/ 108 top:0; 109 right:0; 110 left:0; 111 bottom:0; 112 /*上面表示全覆盖*/ 113 background-color: black; 114 /*上面为背景色 为黑 下面为透明度为50%*/ 115 opacity: 0.5; 116 } 117 .c2{ 118 position: fixed; 119 z-index: 10; 120 /*打开多层样式 fixed模式 定义层级为9*/ 121 122 width:400px; 123 height: 300px; 124 top:50%; 125 left:50%; 126 margin-left: -200px; 127 margin-top: -150px; 128 background-color: white; 129 130 } 131 .z-z{ 132 width: 230px; 133 height: 120px; 134 margin-top: 90px; 135 margin-left: 90px; 136 } 137 138 .error{ 139 color: red; 140 } 141 hr{ 142 width: 230px; 143 } 144 #cre{ 145 margin-left: 70px; 146 } 147 .heds{ 148 /*默认不显示*/ 149 display: none; 150 } 151 152 .right-menu{ 153 width: 320px; 154 height: 30px; 155 line-height: 30px; 156 } 157 .edits{ 158 float: right; 159 border: 1px solid darkgray; 160 padding: 2px; 161 background-color: #A9A9A9; 162 font-size: 9px; 163 } 164 .edits-2{ 165 background-color: orange; 166 } 167 168 .option-ol{ 169 170 } 171 /*下方右边内容块结束*/ 172 173 174 /*返回顶部*/ 175 .pa-top{ 176 width: 68px; 177 height: 48px; 178 position: fixed; 179 right: 25px; 180 bottom: 25px; 181 background-image: url(img/top.png); 182 background-position: -425px -270px ; 183 184 } 185 </style> 186 </head> 187 <body style="margin: 0"> 188 <!--顶部菜单--> 189 <div class="pag-head"> 190 <div class="meun_top"> 191 <a href="" class="meuns_top">顶部菜单一</a> 192 <a href="" class="meuns_top">顶部菜单二</a> 193 <a href="" class="meuns_top">顶部菜单三</a> 194 <a href="" class="meuns_top">顶部菜单四</a> 195 <a href="" class="meuns_top">顶部菜单五</a> 196 <a href="" class="meuns_top">顶部菜单六</a> 197 </div> 198 <div class="clear_div"> 199 200 </div> 201 202 </div> 203 <!--下方大框--> 204 <div class="pag-cent"> 205 206 <!--左边菜单--> 207 <div class="left-meun"> 208 <div class="item"> 209 <div id="i1" class="meuns">菜单1</div> 210 <div class="content"> 211 <div>内容1</div> 212 <div>内容1</div> 213 <div>内容1</div> 214 <div>内容1</div> 215 </div> 216 </div> 217 218 <div class="item"> 219 <div id="i2" class="meuns">菜单2</div> 220 <div class="content hide"> 221 <div>内容2</div> 222 <div>内容2</div> 223 <div>内容2</div> 224 <div>内容2</div> 225 </div> 226 </div> 227 228 <div class="item"> 229 <div id="i3" class="meuns">菜单3</div> 230 <div class="content hide"> 231 <div>内容3</div> 232 <div>内容3</div> 233 <div>内容3</div> 234 <div>内容3</div> 235 </div> 236 </div> 237 238 <div class="item"> 239 <div id="i4" class="meuns">菜单4</div> 240 <div class="content hide"> 241 <div>内容4</div> 242 <div>内容4</div> 243 <div>内容4</div> 244 <div>内容4</div> 245 246 </div> 247 248 </div> 249 250 </div> 251 252 253 254 <!--右边内容--> 255 <div class="big-content"> 256 <div class="content_right"> 257 <div class="hosts"> 258 <div class="right-menu"> 259 <input type="button" id='add' value="添加" > 260 <input type="button" id="all" value="全选" > 261 <input type="button" id="remov" value="取消" > 262 <input type="button" id="rest" value="反选" > 263 <div class="edits" id="ed" name='none'> 264 点击：进入编辑模式 265 </div> 266 </div> 267 268 <table border="1" id="tab"> 269 <thead> 270 <tr> 271 <th>选择</th> 272 <th>主机</th> 273 <th>端口</th> 274 <th>ip</th> 275 <th>操作</th> 276 </tr> 277 </thead> 278 <tbody id="tb"> 279 280 <tr> 281 <td><input type="checkbox" as='true'></td> 282 <td tag='hostname'>主机一</td> 283 <td tag='port'>1000</td> 284 <td tag='ip'>10.10.12.1</td> 285 <td tag='olin'> 286 <select name="ol" class="heds"> 287 <option value="在线">在线</option> 288 <option value="下线">下线</option> 289 </select> 290 <a>在线</a> 291 </td> 292 <tr> 293 <td><input type="checkbox" as='true'></td> 294 <td tag='hostname'>主机二</td> 295 <td tag='port'>1000</td> 296 <td tag='ip'>10.10.12.2</td> 297 <td tag='olin'> 298 <select name="ol" class="heds"> 299 <option value="在线">在线</option> 300 <option value="下线">下线</option> 301 </select> 302 <a>下线</a> 303 </td> 304 </tr> 305 <tr> 306 <td><input type="checkbox" as='true'></td> 307 <td tag='hostname'>主机三</td> 308 <td tag='port'>1000</td> 309 <td tag='ip'>10.10.12.3</td> 310 <td tag='olin'> 311 <select name="ol" class="heds"> 312 <option value="在线">在线</option> 313 <option value="下线">下线</option> 314 </select> 315 <a>下线</a> 316 </td> 317 318 </tr> 319 </tbody> 320 </table> 321 </div> 322 </div> 323 <!--遮罩层--> 324 <div class="c1 heds" id="z-cent"></div> 325 <!--对话框--> 326 <div class="c2 heds" id="z-first"> 327 <form class="z-z"> 328 <lable>主 机：</lable> 329 <input type="text" name="hostname" id="hosts" value=""><br /><br /> 330 <lable>端 口：</lable> 331 <input type="text" name="port" id="ports" value=""><br /><br /> 332 <lable>I P：</lable> 333 <input type="text" name="ip" id="ips" value=""><br /> 334 <hr /> 335 <input type="button" name="" id="cre" value="确定" > 336 <input type="button" id="gb" value="关闭"> 337 </form> 338 339 </div> 340 341 </div> 342 343 </div> 344 345 346 347 <div class="pa-top" onclick="topy();"></div> 348 349 350 <script src="jquery-1.11.3/jquery.min.js" type="text/javascript" charset="utf-8"></script> 351 352 <script type="text/javascript"> 353 354 355 //单个勾选 356 $('#tb tr td').delegate('input[type="checkbox"]','click',function () { 357 console.log($(this).prop('checked')); 358 if($('#ed').attr('as')&& $(this).prop('checked')){ 359 edi_a(this); 360 }else if($('#ed').attr('as')&& $(this).prop('checked')==false){ 361 edi_b(this); 362 } 363 }) 364 365 //进入函数 366 function edi_a (self) { 367 $(self).attr('as','false');//设置是否编辑状态 368 $(self).parent().nextUntil('[tag="olin"]').each(function () { 369 // 父级 的所有兄弟 查找 属性有 tag 的 370 var v=$(this).text();//获取内容 371 $(this).empty();//清空内容 372 var new_v=$(this).append("<input type='text' value='"+v+"'>");//添加内容 373 }) 374 var s=$(self).parent().nextAll('[tag="olin"]').children();//找到下拉菜单标签 375 s.each(function () { 376 $(this).removeClass('heds');//移除样式 377 $(this).next().remove();//清空内容 378 }) 379 } 380 381 //退出函数 382 function edi_b (self) { 383 $(self).attr('as','true');//设置是否编辑状态 384 $(self).parent().nextUntil('[tag="olin"]').each(function () { 385 // 父级 的所有兄弟 查找 属性有 tag 的 386 //$(this).attr('as','true'); 387 var v=$(this).find('input').val();//获取内容 388 $(this).find('input').remove('input');// 移除 标签 389 $(this).text(v); 390 }) 391 var s=$(self).parent().nextAll('[tag="olin"]').children();//找到下拉菜单标签 392 s.each(function () { 393 $(this).addClass('heds');//添加样式 394 var ol=$(this).val();//获取值 395 var n='<a>'+ol+'</a>'; 396 $(this).after(n); 397 }) 398 } 399 400 ////编辑模式判断 401 $('.right-menu').delegate('.edits','click',function(){ 402 403 if($(this).hasClass('edits-2')){ 404 $(this).removeClass('edits-2');//移除样式 405 $(this).text('点击：进入编辑模式');//改变内容 406 $(this).removeAttr('as');//移除属性 407 editlistz () 408 }else{ 409 $(this).addClass('edits-2');//添加样式 410 $(this).text('点击：退出编辑模式');//改变内容 411 $(this).attr('as','disp');//添加属性 412 editlist();//编辑框函数 413 } 414 }) 415 416 //退出编辑框函数 417 function editlistz () { 418 $('#tb tr').find('input[type="checkbox"]').each(function() {//获取表单内容 列表 419 if ($(this).prop('checked')) {//判断是否打勾 420 421 edi_b(this); 422 } 423 }) 424 } 425 426 //进入编辑框函数 427 function editlist () { 428 $('#tb tr').find('input[type="checkbox"]').each(function() {//获取表单内容 列表 429 if ($(this).prop('checked')) {//判断是否打勾 430 //$(this).attr('as','false'); 431 edi_a(this); 432 } 433 }) 434 } 435 436 //批量上下线 437 $('#tb tr td').delegate('select[name="ol"]','click',function () { 438 $(this).keydown(function (event) { 439 if (event.keyCode==17&& $(this).mousedown()){ 440 var ol=$(this).val();//获取值 441 var m=$(this).parent().parent().siblings(); 442 // 父级 的父级 的所有兄弟 443 //console.log(m); 444 m.each(function () { 445 // 子级 446 if ($(this).find('input[as="false"]').prop('checked')) {//找到子级 是有选 上的 447 ($(this).children().find('[name="ol"]').val(ol));//进行赋值 448 } 449 450 }) 451 return false; 452 } 453 454 }) 455 456 }) 457 458 //左侧菜单js 点击函数 459 $('.meuns').click(function(){ 460 //当前点击的标签 461 $(this).next().removeClass('hide');//找到下一个标签 移除样式 462 $(this).parent().siblings().find('.content').addClass('hide')//获取父级,的同级所有兄弟标签 ,查找 其所有下级的类名,添加样式 463 }) 464 465 //返回顶部 466 function topy(){ 467 document.body.scrollTop=0; 468 } 469 470 //显示对话框 471 $('#add').click(function(){ 472 $('#z-cent,#z-first').removeClass('heds');//移除类名 样式 473 $('.z-z input[type="text"]').val(''); 474 }) 475 476 //关闭对话框 477 $('#gb').click(function(){ 478 $('#z-cent,#z-first').addClass('heds');//添加 类名 样式 479 }) 480 481 //添加主机 IP 482 $('#cre').click(function(){ 483 var flag=true;//默认提交 484 $('.error').remove();//事先移除 提示标签 485 $('.z-z').find('input[type="text"]').each(function () {//查找 type=text 的input 循环判断 486 var v=$(this).val();//当前标签的值 487 if(v.length<=0){ 488 flag=false;//改为不能提交 489 var tag =document.createElement('span');//创建一个标签 490 tag.className='error';//添加一个类名 491 tag.innerHTML='不能为空'; 492 $(this).after(tag); 493 } 494 }) 495 if(flag==true){ 496 var host=$('#hosts').val();//主机名 497 var port=$('#ports').val();//端口 498 var ip=$('#ips').val();//ip 499 var tab=$('#tab');//获取页面表格 500 var newtr='<tr><td><input type="checkbox" as="true"></td><td>'+host+'</td><td>'+port+'</td><td>'+ip+'</td><td tag="olin"><select name="ol" class="heds"><option value="在线">在线</option><option value="下线">下线</option></select><a>在线</a></td></tr>'; 501 $(tab).append(newtr); 502 $('#z-cent,#z-first').addClass('heds');//添加 类名 样式 503 } 504 }) 505 506 507 //全选 508 $('#all').click(function (){ 509 $(':checkbox').prop('checked',true).each(function () { 510 511 if ($('#ed').attr('as')&& $(this).attr('as')=='true') {//判断是否是编辑模式,, 512 edi_a(this); 513 } 514 515 }); 516 517 }) 518 519 //取消 520 $('#remov').click(function (){ 521 $(':checkbox').prop('checked',false).each(function () { 522 523 if ($('#ed').attr('as')&& $(this).attr('as')=='false') { 524 edi_b(this); 525 } 526 }) 527 }) 528 529 //反选 530 //通过 each循环 三元运算 操作 写法 531 $('#rest').click(function (){ 532 $('#tb :checkbox').each(function(){ 533 var v=$(this).prop('checked')?false:true;//获取值 534 $(this).prop("checked",v);//赋于checkbox 535 if(v==true){//判断是否是勾选 勾选再进行判断 536 if ($('#ed').attr('as')&& $(this).attr('as')=='true') {//如果是编辑模式 并且 处于锁定状态 537 edi_a(this);//进入编辑 538 } 539 540 }else{ 541 if ($('#ed').attr('as')&& $(this).attr('as')=='false') {//如果是编辑模式 并且 处于非锁定状态 542 543 edi_b(this);//退出编辑 544 } 545 } 546 }) 547 548 }) 549 550 551 </script> 552 553 </body> 554 </html>