HTML+CSS+JavaScript后台管理页面1： 实现头部菜单，内容中分为左侧菜单和右侧表格以及返回顶部，表格中实现全选，反选，取消，添加。

最新推荐文章于 2022-11-14 20:37:24 发布
最新推荐文章于 2022-11-14 20:37:24 发布
阅读量2.4k 收藏 12
点赞数
分类专栏： HTML Javascript CSS 文章标签： HTML CSS JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/beifangdefengchuilai/article/details/80508598
版权
HTML 同时被 3 个专栏收录
22 篇文章 0 订阅
订阅专栏
Javascript
16 篇文章 0 订阅
订阅专栏
CSS
11 篇文章 0 订阅
订阅专栏

代码：

</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
    <style>
        body{
            margin:0;
        }
        .hide{
            display:none;
        }
        .left{
            float:left;
        }
        .right{
            float:right;
        }
        .pg-header{
            height:50px;
            background-color:white;
            color:black;
            line-height:50px;
            padding:0 20px;

        }
        .pg-header .a{
            font-size:15px;
            padding:0 10px;
        }
        .pg-header .a .b{
            position:absolute;
            top:50px;
            right:20px;
            background-color:white;
            color:black;
            z-index:20;
            width:50px;
            display:none;
        }

        .pg-header .a:hover .b{
            display:block;
        }
        .pg-header .a .b a{
            display:block;
            height:35px;
        }
        .pg-header .c{
            margin-top:10px;
            height:30px;
            width:30px;
            line-height:30px;
            text-align:center;
            display:inline-block;
        }
        .pg-header .c:hover{
            background-color:gainsboro;
        }
        .pg-header .icons{
            padding:0 10px;
        }
        .pg-content{
            position:absolute;
            top:50px;
            bottom:0;
            left:0;
            right:0;
            background-color:gainsboro;
        }
        .pg-content .content-menu{
            height:510px;
            width:10%;
            margin:10px 70px;
            background-color:white;
        }
        .pg-content .content-menu a{
            display:block;
            height:25px;
            line-height:25px;
            text-align:center;
        }
        .pg-content .content-menu .d{
            font-size:15px;
            color:black;

        }
        .pg-content .content-menu .d:hover{
            background-color:red;
        }
        .pg-content .Content{
            position:absolute;    /*相对于pg-content的相对top,bottom,right,left*/
            top:10px;
            bottom:0;
            right:70px;
            left:250px;
            background-color:white;
            overflow:auto;
        }
        .pg-content .Content .e{
            text-align:center;
            margin-top:100px;
            font-size:18px;

        }
        .pg-content .Content .z1{
            position:fixed;
            left:0;
            top:0;
            right:0;
            bottom:0;
            background-color:gainsboro;
            opacity:0.6;
            z-index:9;
        }
        .pg-content .Content .z2{
            width:500px;
            height:400px;
            background-color:white;
            position:fixed;
            left:50%;
            top:50%;
            margin-left:-250px;
            margin-top:-200px;
            z-index:10;
        }



    </style>
</head>
<body>
    <div class="pg-header">
        <span class="left" style="font-size:25px; font-family:微软雅黑; color:darkred;">C</span>
        <span class="left" style="font-size:25px; font-family:微软雅黑; color:black;">SDN</span>
        <span class="left a" >首页</span>
        <span class="left a" >博客</span>
        <span class="left a" >学院</span>
        <span class="left a" >下载</span>
        <span class="left a" >GitChat</span>
        <span class="left a" >TinyMind</span>
        <span class="left a" >商城</span>
        <span class="left a" >VIP</span>
        <div class="left a " style="position:relative;">
            <span class="c">...</span>
            <div class="b">
                <a>论坛</a>
                <a>问答</a>
                <a>活动</a>
                <a>招聘</a>
                <a>IT eye</a>
                <a>CSTO</a>
            </div>
        </div>
        <span class="right">注册</span>
        <span class="right a">登录</span>
        <div class="icons right a">
            <i class="fa fa-commenting" aria-hidden="true" style="color:sandybrown;"></i>
            <span >发chat</span>
        </div>
        <div class="icons right a">
            <i class="fa fa-pencil-square" aria-hidden="true" style="color:red;"></i>
            <span>写博客</span>
        </div>
    </div>
    <div class="pg-content">
        <div class="content-menu left">
            <a class="d">推荐</a>
            <a class="d">最新文章</a>
            <a class="d">关注</a>
            <a class="d">资讯</a>
            <a class="d">人工智能</a>
            <a class="d">云计算/大数据</a>
            <a class="d">区块链</a>
            <a class="d">数据库</a>
            <a class="d">程序人生</a>
            <a class="d">研发管理</a>
            <a class="d">前端</a>
            <a class="d">移动开发</a>
            <a class="d">物联网</a>
            <a class="d">运维</a>
            <a class="d">计算机基础</a>
            <a class="d">编程语言</a>
            <a class="d">架构</a>
            <a class="d">音视频开发</a>
            <a class="d">安全</a>
            <a class="d">其他</a>
        </div>
        <div class="Content right">
            <div class="e">

                <input type="button" value="添加" οnclick="AddModel();" />     <!--不会将添加，全选，取消，反选与表格的头对齐-->
                <input type="button" value="全选" οnclick="ChooseAll();" />
                <input type="button" value="取消" οnclick="CancleAll();" />
                <input type="button" value="反选" οnclick="ReverseAll();"/>
                <div style="height:20px;width:100px;"></div>
                <table border="1" align="center" bordercolor="blue" cellpadding="10" cellspacing="0" >
                    <thead>
                        <tr>
                            <th>选择</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>专业</th>
                            <th>爱好</th>
                        </tr>
                    </thead>
                    <tbody id="tb">
                        <tr>
                            <td>
                                <input type="checkbox" value="1" />
                            </td>
                            <td>小明</td>
                            <td>19</td>
                            <td>电子信息工程</td>
                            <td>游戏</td>
                        </tr>
                        <tr>
                            <td>
                                <input type="checkbox" value="2" />
                            </td>
                            <td>小花</td>
                            <td>19</td>
                            <td>计算机</td>
                            <td>编程</td>
                        </tr>
                        <tr>
                            <td>
                                <input type="checkbox" value="3" />
                            </td>
                            <td>小龙</td>
                            <td>24</td>
                            <td>软件工程</td>
                            <td>软件设计</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div id="i1" class="z1 hide"></div>
            <div id="i2" class="z2 hide">
                <p>
                    <label for="username" >姓名：</label>
                    <input id="username" type="text" name="user" />
                </p>
                <p>
                    <label for="age0" >年龄：</label>
                    <input  id="age0" type="text" name="age" />
                </p>
                <p>
                    <label for="major0">专业：</label>
                    <input  id="major0"  type="text" name="major"/>
                </p>
                <p>
                    <label for="hobby0">爱好：</label>
                    <input  id="hobby0"  type="text" name="hobby"/>
                </p>
                <p>
                    <input type="button" value="取消" οnclick="HideModel()"/>
                    <input type="button" value="确定" />
                </p>
            </div>
            <div style="position:absolute;bottom:0;right:0;width:60px;height:30px;font-size:15px;">返回顶部</div>

        </div>
    </div>

    <script>
        function AddModel(){
            document.getElementById("i1").classList.remove('hide');
            document.getElementById("i2").classList.remove('hide');
        }
        function HideModel(){
            document.getElementById("i1").classList.add('hide');
            document.getElementById("i2").classList.add('hide');
        }
        function ChooseAll(){
            var tbody = document.getElementById("tb");
            var tr_list = tbody.children;
                for (var i = 0; i < tr_list.length; i++) {
                  var current_tr = tr_list[i];
                  var checkbox = current_tr.children[0].children[0];
                  checkbox.checked = true;
                }

        }
        function CancleAll(){
            var tbody=document.getElementById("tb");
            var tr_list=tbody.children;
                for(var i=0;i<tr_list.length;i++){
                      var current_tr=tr_list[i];
                      var checkbox=current_tr.children[0].children[0];
                      checkbox.checked=false;
                  }
        }


        function ReverseAll(){
            var tbody=document.getElementById("tb");
                  var tr_list=tbody.children;
                  for(var i=0;i<tr_list.length;i++){
                      var current_tr=tr_list[i];
                      var checkbox=current_tr.children[0].children[0];
                      if(checkbox.checked){
                          checkbox.checked=false;
                      }else{
                          checkbox.checked=true;
                      }
                  }

        }
    </script>

</body>
</html>

效果：


点添加后页面：


风从北方来
关注
  • 0
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【前端代码实例】使用HTML5+CSS3+JavaScript制作一个响应式的后台管理系统~带侧边导航栏仪表盘功能
南北极之间
08-08 1万+
classList 属性返回元素的类名，作为 DOMTokenList 对象。该属性用于在元素中添加，移除及切换 CSS 类。classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。
html左边是菜单右边是内容,左首菜单栏右侧内容
weixin_39702483的博客
06-08 4954
左侧菜单栏右侧内容(如有错敬请指点，以下是我工作中遇到并且解决的问题)在网上搜这个内容时，大部分说 左侧a标签然后链接到右侧的iframe框架。有的 用frameset标签实现的，有的 左侧点击时，右侧使用innerHTML/innerText方法加入内容，有的 左侧点击时，右侧隐藏其他div，显示对应内容的div。我试了其中一个方法(左侧a标签 链接到右侧的iframe框架)onedsfsdfs...
javascript实现可全选、反选及删除表格的方法
12-11
本文实例讲述了javascript实现可全选、反选及删除表格的方法。分享给大家供大家参考。具体实现方法如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <
用html和css写一个头部header和左侧菜单栏menu-bar固定的的页面
weixin_30491641的博客
12-30 764
这个页面header部分是100%的宽度，60px的高度，左侧是刚好一屏的高度，180的宽度，右侧的部分把剩余的空间占满，刚开始的时候还没怎么接触这样的页面，以为使用js读取浏览的可视化宽高，然后在做计算，但是因为后面做的页面需要自适应屏幕的大小而发生变化，于是我用了jquery中的$(window).resize()方法，当屏幕出现各种各样的大小或者以各种方式打开浏览器的时候会出现很多问题，很多...
html左侧导航栏右侧显示内容
无心
08-02 2万+
效果图 代码 复制下来直接运行就可以 <!doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.
html左侧菜单栏代码右侧展示,html框架如何实现左边为导航栏,右边为连接页面,代码写出来...
weixin_39646658的博客
05-30 1737
你直接运行就可以了：：functionsetTab(m,n){vartli=document.getElementById("leftmenu"+m).getElementsByTagName("li");varmli=document.getElementById("mcont"+m).getElementsByTagName("ul");for(i=0;i...
HTML页面左侧菜单栏切换实现右侧主体内容改变
大海无量的博客
03-01 3万+
原先是用iframe，后来有更好的方法 参考：https://blog.csdn.net/qq_36538012/article/details/80279139
数据大屏：物联网大数据可视化源码html模板.rar
04-01
数据大屏：物联网大数据可视化源码html模板.rar
H5+JS实现三级菜单（包括水平、垂直菜单及基本网页架构）完整
Xiaofugongzi的博客
03-07 1566
用Html5和JavaScript实现三级菜单和基本的网页架构 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS实现三级菜单</title> </head> <style> ...
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 1万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
html+javascript+bootstrap实现层级多选框全层全选和多选功能
11-27
想做一个先按层级排序并可以多选的功能，首先倾向于用多层标签式的，直接选定加在文本域里， 查到这文，非常详细，如果大家需要做前面所说的功能，可以参考这个地址，http://mrthink.net/jquery-plugin-iselecttags/      但是，考虑到如果要做一个选项数不确定、可能非常多，用标签会容易视觉疲劳，同时要求随着选项数的变化，最小程度影响网页布局和效果，于是选择用层级的多选框，也就是设置电脑的那种常见效果。第二层选项可以折叠/展开到第一层下面，用bootstrap的 data-toggle="collapse" data-target="#demo1" 进行关联第二
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
12-29
前言 最近几天在公司做了个后台管理系统的小模块，其中有个功能是实现复选框的全选和全不选，用bootstrap和jQuery来实现。 效果是这样： 因为是内部用，样式也不要求太好看，直接上代码。 示例代码： <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <META content=IE=
Element实现表格分页数据选择+全选所有完善批量操作
12-11
后台管理系统中的列表页面，一般都会有对列表数据进行批量操作的功能，例如：批量删除、批量删除等。 之前项目中只是简单的用到Element框架中常规的属性、事件。在一次机缘巧合下，了解到一个公司内部的框架是基于...
PyQT实现菜单中的复制,全选和清空的功能的方法
09-19
今天小编就为大家分享一篇PyQT实现菜单中的复制,全选和清空的功能的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
HTML+CSS做登录注册界面
热门推荐
风从北方来的博客
05-29 14万+
在登录界面点注册会进入注册界面登录界面代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&am
HTML做网页登录界面
风从北方来的博客
05-17 3万+
代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;d
HTML 请输入关键字的搜索框，功能：输入时：框内的请输入关键字消失，鼠标移开时 框内的请输入关键字又重现
风从北方来的博客
05-31 1万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div s
HTML 模态对话框
风从北方来的博客
05-26 5273
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; .hide{ displ
html 左侧菜单，功能：打开菜单1，同时关闭其他菜单内容
风从北方来的博客
05-28 2778
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; .hide{ display
HTML+CSS+jQuery实现：设置复选框至少3个。设置按钮，全选，反选，全不选。
最新发布
05-30
好的，我可以为您提供一个基本的HTML+CSS+jQuery示例实现，如下所示： ```html <!DOCTYPE html> <html> <head> <title>复选框操作示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style type="text/css"> .container { margin: 20px; } .checkbox-group { margin-bottom: 10px; } .checkbox-group label { margin-right: 10px; } .button-group { margin-top: 10px; } </style> </head> <body> <div class="container"> <div class="checkbox-group"> <label><input type="checkbox" name="checkbox[]" value="1">选项1</label> <label><input type="checkbox" name="checkbox[]" value="2">选项2</label> <label><input type="checkbox" name="checkbox[]" value="3">选项3</label> <label><input type="checkbox" name="checkbox[]" value="4">选项4</label> <label><input type="checkbox" name="checkbox[]" value="5">选项5</label> </div> <div class="button-group"> <button id="select-all">全选</button> <button id="select-inverse">反选</button> <button id="select-none">全不选</button> </div> </div> <script type="text/javascript"> $(function() { // 全选 $('#select-all').click(function() { $('input[type="checkbox"]').prop('checked', true); }); // 反选 $('#select-inverse').click(function() { $('input[type="checkbox"]').each(function() { $(this).prop('checked', !$(this).prop('checked')); }); }); // 全不选 $('#select-none').click(function() { $('input[type="checkbox"]').prop('checked', false); }); }); </script> </body> </html> ``` 在这个示例中，我们首先定义了一个包含5个复选框的`checkbox-group`，并且定义了一个包含三个按钮的`button-group`。然后，我们使用jQuery来实现三个操作： 1. 全选：当用户点击`select-all`按钮时，我们使用`prop`方法将所有复选框的`checked`属性设置为`true`，从而实现全选的功能。 2. 反选：当用户点击`select-inverse`按钮时，我们使用`each`方法遍历所有复选框，并对每个复选框的`checked`属性取反，从而实现反选的功能。 3. 全不选：当用户点击`select-none`按钮时，我们使用`prop`方法将所有复选框的`checked`属性设置为`false`，从而实现全不选的功能。 希望这个示例能够帮助您实现您的需求！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值