day16-作业 后台管理
二话不说开撸作业
作业要求：
后台管理平台 ，编辑表格：
1. 非编辑模式：
可对每行进行选择； 反选； 取消选择
2. 编辑模式:
进入编辑模式时如果行被选中，则被选中的行万变为可编辑状态，未选中的不改变
退出编辑模式时，所有的行进入非编辑状态
处于编辑模式时，行被选中则进入编辑状态，取消选择则进入非编辑状态
需要导入 jquery , 版本：1.2.。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>主机后台管理程序</title> 6 <link rel="icon" href="image/link.jpg"> 7 <style> 8 .body{ 9 margin: 0 auto; 10 } 11 .pg-header{ 12 height: 60px; 13 width: 90%; 14 line-height: 60px; 15 text-align: center; 16 /*background-color: #dddddd;*/ 17 /*margin-left: 30%;*/ 18 } 19 .pg-content{ 20 margin-left:30% 21 } 22 .edit{ 23 cursor: pointer; 24 width: 108px; 25 background-color: #989898; 26 height: 20px; 27 line-height: 20px; 28 text-align: center; 29 margin-left: 15px; 30 } 31 .editing{ 32 background-color: brown; 33 } 34 35 </style> 36 37 </head> 38 <body class="body"> 39 <div class="pg-header"> 40 <h1>主机后台管理程序</h1> 41 </div> 42 <div class="pg-content"> 43 <table border="1" class="tab1"> 44 <thead> 45 <tr> 46 <th>选项</th> 47 <th>主机IP</th> 48 <th>端口</th> 49 <th>状态</th> 50 </tr> 51 </thead> 52 <tbody> 53 <tr> 54 <td><input type="checkbox"></td> 55 <td><input type="text" disabled="disabled" value="1.1.1.1"></td> 56 <td><input type="text" disabled="disabled" value="22"></td> 57 <td> 58 <select disabled="true"> 59 <option selected="selected">在线</option> 60 <option>下线</option> 61 </select> 62 </td> 63 </tr> 64 <tr> 65 <td><input type="checkbox"></td> 66 <td><input type="text" disabled="disabled" value="2.2.2.2"></td> 67 <td><input type="text" disabled="disabled" value="22"></td> 68 <td> 69 <select disabled="true"> 70 <option selected="selected">在线</option> 71 <option>下线</option> 72 </select> 73 </td> 74 </tr> 75 <tr> 76 <td><input type="checkbox"></td> 77 <td><input type="text" disabled="disabled" value="3.3.3.3"></td> 78 <td><input type="text" disabled="disabled" value="23"></td> 79 <td> 80 <select disabled="true"> 81 <option selected="selected">在线</option> 82 <option>下线</option> 83 </select> 84 </td> 85 </tr> 86 <tr> 87 <td><input type="checkbox"></td> 88 <td><input type="text" disabled="disabled" value="5.5.5.5"></td> 89 <td><input type="text" disabled="disabled" value="8080"></td> 90 <td> 91 <select disabled="true"> 92 <option selected="selected">在线</option> 93 <option>下线</option> 94 </select> 95 </td> 96 </tr> 97 <tr> 98 <td><input type="checkbox"></td> 99 <td><input type="text" disabled="disabled" value="6.6.6.6"></td> 100 <td><input type="text" disabled="disabled" value="22"></td> 101 <td> 102 <select disabled="true"> 103 <option>在线</option> 104 <option selected="selected">下线</option> 105 </select> 106 </td> 107 </tr> 108 </tbody> 109 </table> 110 <input type="button" value="全选" id="check_all"> 111 <input type="button" value="反选" id="reverse_all"> 112 <input type="button" value="取消" id="cancle_all"> 113 <p></p> 114 <div class="edit" id="edit">进入编辑模式</div> 115 </div> 116 <script src="jq.js"></script> 117 <script> 118 // 全选功能 119 $("#check_all").click(function(){ 120 if ($("#edit").attr("class").indexOf("editing")==-1) { 121 $("input[type='checkbox']").prop('checked', true); 122 }else{ 123 $("input[type='checkbox']").prop('checked', true); 124 $("input[type='checkbox']").each(function(v){ 125 var tag = $(this).parent().nextAll(); 126 $(tag[0].children).removeAttr("disabled"); 127 $(tag[1].children).removeAttr("disabled"); 128 $(tag[2].children).removeAttr("disabled"); 129 }) 130 } 131 }); 132 133 // 反选功能 134 $("#cancle_all").click(function(){ 135 if ($("#edit").attr("class").indexOf("editing")==-1) { 136 $("input[type='checkbox']").prop('checked', false); 137 }else{ 138 $("input[type='checkbox']").prop('checked', false); 139 $("input[type='checkbox']").each(function(v){ 140 // console.log(this); 141 var tag = $(this).parent().nextAll(); 142 $(tag[0].children).attr("disabled","disabled"); 143 $(tag[1].children).attr("disabled","disabled"); 144 $(tag[2].children).attr("disabled","disabled"); 145 $("#edit").removeClass("editing"); 146 $("#edit")[0].innerText="进入编辑模式" 147 $("#edit").bind('click',editing); 148 }) 149 } 150 }); 151 152 // 取消键功能 153 $("#reverse_all").click(function(){ 154 if ($("#edit").attr("class").indexOf("editing")==-1) { 155 $('input[type="checkbox"]').each(function (k) { 156 if (this.checked) { 157 this.checked = false 158 } else { 159 this.checked = true 160 } 161 }) 162 }else{ 163 $('input[type="checkbox"]').each(function (k) { 164 if (this.checked) { 165 this.checked = false; 166 var tag = $(this).parent().nextAll(); 167 $(tag[0].children).attr("disabled","disabled"); 168 $(tag[1].children).attr("disabled","disabled"); 169 $(tag[2].children).attr("disabled","disabled"); 170 } else { 171 this.checked = true; 172 var tag = $(this).parent().nextAll(); 173 $(tag[0].children).removeAttr("disabled"); 174 $(tag[1].children).removeAttr("disabled"); 175 $(tag[2].children).removeAttr("disabled"); 176 } 177 }) 178 } 179 }); 180 181 // 进入编辑模式绑定事件 182 $("#edit").bind('click',editing); 183 184 function editing(){ 185 $(this).addClass("editing"); 186 this.innerText="编辑中。。。"; 187 // 解除绑定 188 $("#edit").unbind('click',editing); 189 $("input[type='checkbox']").each(function(a) { 190 if (this.checked) { 191 var tag = $(this).parent().nextAll(); 192 $(tag[0].children).removeAttr("disabled"); 193 $(tag[1].children).removeAttr("disabled"); 194 $(tag[2].children).removeAttr("disabled"); 195 } 196 }) 197 } 198 199 // 在编辑模式下，和非编辑模式下，选择单个功能 200 $("input[type='checkbox']").click(function(c){ 201 // console.log(1,this); 202 if ($("#edit").attr("class").indexOf("editing") != -1) { 203 // console.log(2,this); 204 if(this.checked){ 205 var tag = $(this).parent().nextAll(); 206 $(tag[0].children).removeAttr("disabled"); 207 $(tag[1].children).removeAttr("disabled"); 208 $(tag[2].children).removeAttr("disabled"); 209 210 }else{ 211 var tag = $(this).parent().nextAll(); 212 $(tag[0].children).attr("disabled","disabled"); 213 $(tag[1].children).attr("disabled","disabled"); 214 $(tag[2].children).attr("disabled","disabled"); 215 } 216 217 }else{} 218 }); 219 220 </script> 221 </body> 222 </html>
