后台管理表格

  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>主&nbsp;机：</lable>
143                 <input type="text" name="hostname"  id="hosts" value=""><br /><br />
144                 <lable>端&nbsp;口：</lable>
145                 <input type="text" name="port" id="ports" value=""><br /><br />
146                 <lable>I&nbsp;&nbsp;&nbsp;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>

后台管理表格.Html

  1 *{
  2     margin: 0;
  3 }
  4 /*顶部菜单*/
  5 .pag-head{
  6     position: fixed;
  7     z-index: 7;
  8     top: 0;
  9     left: 0;
 10     right: 0;
 11     height: 48px;
 12     width: 100%;
 13     background: deepskyblue;
 14 }
 15 .meun_top{
 16     height: 48px;
 17     line-height: 48px;
 18     width: 960px;
 19     /*border: 1px solid red;*/
 20     margin: 0 auto;
 21 }
 22 /**顶部菜单组**/
 23 .meuns_top{
 24     text-decoration: none;
 25     color: white;
 26     padding: 0px 10px 0px 10px;
 27     display: inline-block;
 28 }
 29 .meuns_top:hover{
 30     background-color: rgba(64,119,203,0.6);
 31 }
 32 
 33 .clear_div{
 34     clear: both;
 35 }
 36 /*顶部菜单结束*/
 37 
 38 
 39 /*下方大框*/
 40 .pag-cent{
 41     margin-top: 50px;
 42 
 43 }
 44 /*左侧菜单*/
 45 .left-meun{
 46     z-index: 8;
 47     position: fixed;
 48     top: 50px;
 49     left: 55px;
 50 }
 51 .meuns{
 52 
 53     background-color: #005EA7;
 54     height: 45px;
 55     width:150px;
 56     color:white;
 57     line-height: 45px;
 58     text-align: center;
 59 }
 60 .meuns:hover{
 61     background-color: rgba(64,119,203,0.6);
 62 }
 63 .hide{
 64     display: none;
 65 }
 66 .content{
 67     margin-left: 65%;
 68 }
 69 .item{
 70     width:150px;
 71 }
 72 /*左侧菜单结束*/
 73 
 74 /*下方右边内容块*/
 75 .big-content{
 76     height: 1000px;
 77     border: 1px solid green;
 78 }
 79 
 80 .content_right{
 81     margin: 0 auto;
 82     height: 800px;
 83     width: 960px;
 84     border: 1px solid blueviolet;
 85 
 86 }
 87 
 88 .hosts{
 89     margin-left: 30px;
 90     margin-top: 20px;
 91 }
 92 table{
 93     border-spacing: 1px;
 94     margin-top: 8px;
 95 }
 96         /*遮罩层*/
 97 .c1{
 98     position: fixed;
 99     z-index: 9;
100     /*打开多层样式 fixed模式 定义层级为9*/
101     top:0;
102     right:0;
103     left:0;
104     bottom:0;
105     /*上面表示全覆盖*/
106     background-color: black;
107     /**上面为背景色 为黑  下面为透明度为50%*!*/
108     opacity: 0.5;
109         }
110 .c2{
111     position: fixed;
112     z-index: 10;
113     /*打开多层样式 fixed模式 定义层级为9*/
114     width:400px;
115     height: 300px;
116     top:50%;
117     left:50%;
118     margin-left: -200px;
119     margin-top: -150px;
120     background-color: white;
121 
122 }
123 .z-z{
124     width: 230px;
125     height: 120px;
126     margin-top: 90px;
127     margin-left: 90px;
128 }
129 
130 .error{
131     color: red;
132 }
133 hr{
134     width: 230px;
135 }
136 #cre{
137     margin-left: 70px;
138 }
139 .heds{
140     /*默认不显示*/
141     display: none;
142 }
143 
144 .right-menu{
145     width: 320px;
146     height: 30px;
147     line-height: 30px;
148 }
149 .edits{
150     float: right;
151     border: 1px solid darkgray;
152     padding: 2px;
153     background-color: #A9A9A9;
154     font-size: 9px;
155 }
156 .edits-2{
157     background-color: orange;
158 }
159 
160 .option-ol{
161 
162 }
163 /*下方右边内容块结束*/
164 
165 
166 /*返回顶部*/
167 .pa-top{
168     width: 68px;
169     height: 48px;
170     position: fixed;
171     right: 25px;
172     bottom: 25px;
173     background: url(icon.png) no-repeat 0;
174     background-position: -425px -270px ;
175 
176 }

后台管理表格.css