zoukankan      html  css  js  c++  java
  • 后台管理表格

      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
  • 相关阅读:
    Java面向对象---重写(Override)与重载(Overload)
    Java面向对象---继承
    Java 异常处理
    Java 正则表达式
    Java 日期时间
    Java Number & Math 类
    Java StringBuffer 和 StringBuilder 类
    使用老毛桃安装Windows操作系统
    Horizon代码的层次结构
    云平台-资源监控模块和分布式日志采集系统模块
  • 原文地址:https://www.cnblogs.com/sun1994/p/8317038.html
Copyright © 2011-2022 走看看