当前位置：首页 » 《随便一记》 » 正文

图书管理系统网站（运用技术：bootstrap,jquery,javascrip）_01？的博客

20 人参与  2022年02月20日 13:08  分类 : 《随便一记》  评论

点击全文阅读


运用jquery按钮事件实现页面切换，表格添加，以及css美化，借助bootstrap实现页面的美化

进入该系统为登陆界面，在账号和密码为空的情况下，会提示账号密码不能为空

点击注册，则跳入注册界面，注册中任何一项为空都为提醒不能为，点击立即注册后则跳回登陆界面

   

 点击登陆后则进入主界面

第一功能：点击图书管理则进入图书管理界面，点击左侧按钮的添加图书可切换为添加界面

 

 点击添加图书，图书信息会添加到表格末端

第二功能：点击图书购买按钮，会出现购买商城，点击我的订单则出现我的订单界面

 在图书购买中输入数量，点击想要添加的书本的，点击加入订单，即可在我的订单中查看，在我的订单中会算出总价格

 

 第三功能：点击图书管理员则进入员工管理界面

 

点击员工添加按钮进行员工信息添加 

登陆界面代码 

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../lib/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function (){
            //登陆按钮绑定事件
            $("#button1").click(function () {
                if($("#name").val()==""){
                    alert("用户名不能为空")
                    return false
                }
                if($("#colFormLabelLg").val()==""){
                    alert("密码不能空")
                    return false
                }else {
                    alert("登陆成功")
                    location.href="首页.html"
                }

            })
            //注册按钮绑定事件
            $("#button2").click(function () {
                if(confirm("确定进入注册界面吗？")){
                    location.href="注册.html"
                }

            })
        })
    </script>
    <style>
        /*设置标题样式*/
        #div1{
            color: #5c636a;
            font-size: xxx-large;
            margin-left: 500px;
            margin-top: 0px;
        }
        /*背景图片设置*/
        #div2{
            border: 2px darkgray solid;
            overflow: auto;
            background: url("../picture/01.jpg") no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
            width: 1250px;
            height: 500px;
            margin-left: 10px;
        }
        #div3{
            background: deepskyblue;
            width: 500px;
            height: 400px;
            background-color: rgba(255,255,255,0.8);
            margin-top: 50px;
            margin-left: 400px;
        }

    </style>

    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div id="div1" >
         图书管理系统
    </div>
    <!--内容区域-->
    <div id="div2">
        <!--登陆框设置-->
        <div id="div3">
            <div class="row" style="position: absolute;top: 180px;left: 480px">
                <label for="colFormLabelLg" class="col-sm-4 col-form-label col-form-label-lg">用户账号</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control form-control-lg" id="name">
                </div>
            </div>

            <div class="row" style="position: absolute;top: 260px;left: 480px">
                <label for="colFormLabelLg" class="col-sm-4 col-form-label col-form-label-lg">用户密码</label>
                <div class="col-sm-8">
                    <input type="password" class="form-control form-control-lg" id="colFormLabelLg" >
                </div>
            </div>

            <button class="btn btn-secondary" type="button" style="position: absolute;top: 340px;left: 480px" id="button1">登陆</button>
            <button class="btn btn-secondary" type="button" style="position: absolute;top: 340px;left: 762px" id="button2">注册</button>
        </div>
    </div>
</body>
</html>

 注册界面代码

 

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../lib/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function (){
            //判断用户名，密码，电话，邮箱是否为空
            $("#button").click(function () {
                if($("#name").val()==""){
                    alert("用户名不能为空")
                    return false
                }
                if($("#password").val()==""){
                    alert("密码不能为空")
                    return false
                }
                if($("#phone").val()==""){
                    alert("电话不能为空")
                    return false
                }
                if($("#colFormLabelLg").val()==""){
                    alert("邮箱不能为空")
                    return false
                }
                else{
                    location.href="登陆.html"
                }

            })

        })

    </script>
    <style>
        /*--设置图片背景*/
        #div{
            background: url("../picture/04.jpg") no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
            width: 1278px;
            height: 598px;
        }
        /*设置标题样式*/
        #div1{
            color: black;
            font-size: xxx-large;
            margin-left: 500px;
            margin-top: 0px;
        }
        /*设置注册边框样式*/
        #div2{
            background: deepskyblue;
            width: 500px;
            height: 500px;
            background-color: rgba(255,255,255,0.8);
            margin-top: 30px;
            margin-left: 400px;
        }


    </style>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div id="div">
    <!--标题区域-->
        <div id="div1" >
            图书管理系统
        </div>

         <!--注册区域-->
        <div id="div2">
            <!--注册模块-->
            <form class="row g-3" >
                <!--col-sm-3设置列宽度-->
                <label for="colFormLabelLg" class="col-sm-3 col-form-label col-form-label-lg">用户账号</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control form-control-lg" id="name" >
                </div>
                <!--密码填写-->
                <label for="colFormLabelLg" class="col-sm-3 col-form-label col-form-label-lg">用户密码</label>
                <div class="col-sm-8">
                    <input type="password" class="form-control form-control-lg" id="password" >
                </div>

                <label for="colFormLabelLg" class="col-sm-3 col-form-label col-form-label-lg">手机号码</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control form-control-lg" id="phone" >
                </div>

                <label for="colFormLabelLg" class="col-sm-3 col-form-label col-form-label-lg">电子邮箱</label>
                <div class="col-sm-8">
                    <input type="email" class="form-control form-control-lg" id="colFormLabelLg" >
                </div>

                <div class="col-md-5">
                    <label for="inputState" class="form-label"></label>
                    <select id="inputState" class="form-select">
                        <option selected>----请选择省份----</option>
                        <option>-------广东-------</option>
                        <option>-------贵州-------</option>
                        <option>-------湖北-------</option>
                        <option>-------湖南-------</option>
                        <option>-------福建-------</option>
                    </select>
                </div>

                <div class="col-md-6">
                    <label for="inputState" class="form-label"></label>
                    <select id="hobby" class="form-select">
                        <option selected>----请选择建立时间----</option>
                        <option>-------2001-------</option>
                        <option>-------2004-------</option>
                        <option>-------2007-------</option>
                        <option>-------2009-------</option>
                        <option>-------2018-------</option>
                    </select>
                </div>

                <div class="d-grid gap-2" >
                    <button class="btn btn-secondary" type="button" id="button">立即注册</button>
                </div>
            </form>

        </div>
    </div>
</body>
</html>

                主界面代码

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../lib/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function (){
            //删除函数复用
            var detelefun=function (){
                var detele=$(this).parent().parent()
                var tip=detele.find("td:first").text()
                if(confirm("是否删除"+tip+"吗？")){
                    detele.remove()
                }
                return false
            }
            //图书信息按钮
            $("#inform").click(function () {
                $("#information").toggle()
                $("#addinformation").toggle()
            })
            //添加图书信息
            $("#add").click(function () {
                $("#addinformation").toggle()
                $("#information").toggle()
            })
            //删除标签
            $("a").click(detelefun)
            //图书添加标签
            $("#addbook").click(function () {
                //获取文本框内容
                var name=$("#name").val()
                var person=$("#person").val()
                var type=$("#type").val()
                var  number=$("#number").val()
                var editor=$("#editor").val()
                var book=$("<tr>\n" +
                    "                            <td width=\"200\" align=\"center\">"+name+"</td>\n" +
                    "                            <td width=\"100\" align=\"center\">"+person+"</td>\n" +
                    "                            <td width=\"100\" align=\"center\">"+type+"</td>\n" +
                    "                            <td width=\"100\" align=\"center\">"+number+"</td>\n" +
                    "                            <td width=\"100\" align=\"center\">"+editor+"</td>\n" +
                    "                            <td width=\"50\" align=\"center\"><a href=\"#\">删除</a> </td>\n" +
                    "                        </tr>")
                book.appendTo($("#table"))
                book.find("a").click(detelefun)
                alert("添加"+name+"图书成功")
                return false
            })
            //加入订单按钮绑定事件
            $("button[name=addshop]").click(function () {
                var detele=$(this).parent().parent()
                var name=detele.find("td:first").text()
                var price=detele.find("td:eq(1)").text()
                var number=detele.find("input").val()
                var sum=price*number
                var table=$("<tr>\n" +
                    "                        <td width=\"100\" align=\"center\">"+name+"</td>\n" +
                    "                        <td width=\"100\" align=\"center\">"+price+"</td>\n" +
                    "                        <td width=\"100\" align=\"center\">"+number+"</td>\n" +
                    "                        <td width=\"100\" align=\"center\">"+sum+"</td>\n" +
                    "                    </tr>")
                table.appendTo($("#shoptable"))
                alert("成功添加"+name+"图书进入我的订单")
                return true
            })
            //四个功能切换按钮
            $("#manger").click(function (){
                $("#information").show()
                $("#function").show()
                $("#addinformation").hide()
                $("#shopping").hide()
                $("#mybill").hide()
                $("#people").hide()
            })
            $("#buy").click(function (){
                $("#information").hide()
                $("#function").hide()
                $("#addinformation").hide()
                $("#shopping").show()
                $("#mybill").hide()
                $("#people").hide()
            })
            $("#order").click(function (){
                $("#information").hide()
                $("#function").hide()
                $("#addinformation").hide()
                $("#shopping").hide()
                $("#mybill").show()
                $("#people").hide()
            })
            $("#mangerpepleo").click(function (){
                $("#information").hide()
                $("#function").hide()
                $("#addinformation").hide()
                $("#shopping").hide()
                $("#mybill").hide()
                $("#people").show()
            })
            //添加员工按钮添加事件
            $("#addperson").click(function () {
                var name=$("#name1").val()
                var id=$("#id").val()
                var text=$("#text").val()
                var password=$("#password").val()
                var book=$("<tr>\n" +
                    "                        <td width=\"160px\" align=\"center\" >"+name+"</td>\n" +
                    "                        <td width=\"160px\" align=\"center\">"+id+"</td>\n" +
                    "                        <td width=\"160px\" align=\"center\" >"+text+"</td>\n" +
                    "                        <td width=\"160px\" align=\"center\" >"+password+"</td>\n" +
                    "                    </tr>")
                book.appendTo($("#personinformation"))
                alert("添加"+name+"员工信息成功")
            })
            //信息按钮与添加按钮绑定事件
            $("#button1").click(function () {
                $("#table1").show()
                $("#addtable").hide()
            })
            $("#button2").click(function () {
                $("#table1").hide()
                $("#addtable").show()
            })



        })

    </script>
    <style>
        #div1{
            color: #5c636a;
            font-size: xxx-large;
            margin-left: 500px;
            margin-top: 0;
        }
    </style>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/bootstrap.bundle.min.js"></script>
    <style>
        /*添加背景图片*/
        #div3{
            background:url("../picture/背景.jpg") no-repeat;
            background-size: 100% 100%;
            height: 510px;
        }
        /*给背景设置白色透明*/
        #son{
            background-color: white;
            height: 510px;
            background-color: rgba(255,255,255,0.8);
        }
        /*功能区域边款*/
        .fun{
            border:3px #5c636a solid;
            height: 510px;
            width: 200px;
        }
        /*内容区域框架*/
        .content{
            border:3px #5c636a solid;
            height: 510px;
            width: 1060px;
            position: absolute;
            z-index: 1;
            top: 110px;
            left: 200px;
        }
        /*功能区第一个按钮位置*/
        .location1{
            margin-top: 150px;
            margin-left: 40px;
        }
        /*功能区第二个按钮位置*/
        .location2{
            margin-top: 100px;
            margin-left: 40px;
        }
        /*表格位置*/
        #table{
            margin-top: 50px;
            margin-left: 200px;
        }
        /*设置添加图书信息边框*/

    </style>
</head>
<body>
<!--标题区域-->
    <div id="div1">
        图书管理系统
    </div>

    <!--选择功能区域-->
    <div style="background-color: slategrey">
        <!--功能选择区分为四部分-->
        <div class="container">
            <div class="row align-items-start">
                <div class="col">
                    <!--设置按钮-->
                    <div class="d-grid gap-2">
                        <button class="btn btn-outline-secondary" type="button" style="color: black" id="manger">图书管理</button>
                    </div>
                </div>

                <div class="col">
                    <div class="d-grid gap-2">
                        <button class="btn btn-outline-secondary" type="button" style="color: black" id="buy">图书购买</button>
                    </div>
                </div>

                <div class="col">
                    <div class="d-grid gap-2">
                        <button class="btn btn-outline-secondary" type="button" style="color: black" id="order">我的订单</button>
                    </div>
                </div>

                <div class="col">
                    <div class="d-grid gap-2">
                        <button class="btn btn-outline-secondary" type="button" style="color: black" id="mangerpepleo">图书管理员</button>
                    </div>
                </div>
            </div>
    </div>
    </div>

    <!--内容区域-->
    <div id="div3">
        <div id="son">
            <!--图书管理代码-->
            <div  id="book">
                <!--图书功能选择-->
                <div class="fun" id="function">
                    <button type="button" class="btn btn-secondary location1" id="inform">图书信息</button>
                    <button type="button" class="btn btn-secondary location2" id="add">添加图书</button>
                </div>
                <!--图书信息代码-->
                <div class="content" id="information" >
                    <table border="2" id="table">
                        <tr>
                            <td width="200" align="center">书名</td>
                            <td width="100" align="center">作者</td>
                            <td width="100" align="center">类别</td>
                            <td width="100" align="center">库存</td>
                            <td width="100" align="center">出版社</td>
                            <td width="50" align="center"></td>
                        </tr>
                        <tr>
                            <td width="200" align="center">java基础案例教程</td>
                            <td width="100" align="center">黑马程序员</td>
                            <td width="100" align="center">IT类</td>
                            <td width="100" align="center">100</td>
                            <td width="100" align="center">人民邮电</td>
                            <td width="50" align="center"><a href="#">删除</a> </td>
                        </tr>
                        <tr>
                            <td width="200" align="center">python3程序设计</td>
                            <td width="100" align="center">唐永华</td>
                            <td width="100" align="center">IT类</td>
                            <td width="100" align="center">500</td>
                            <td width="100" align="center">人民邮电</td>
                            <td width="50" align="center"><a href="#">删除</a> </td>
                        </tr>
                        <tr>
                            <td width="200" align="center">概率论与数理统计</td>
                            <td width="100" align="center">马新民</td>
                            <td width="100" align="center">数学类</td>
                            <td width="100" align="center">500</td>
                            <td width="100" align="center">机械工业</td>
                            <td width="50" align="center"><a href="#">删除</a> </td>
                        </tr>
                        <tr>
                            <td width="200" align="center">数据结构</td>
                            <td width="100" align="center">严蔚敏</td>
                            <td width="100" align="center">IT类</td>
                            <td width="100" align="center">500</td>
                            <td width="100" align="center">人民邮电</td>
                            <td width="50" align="center"><a href="#">删除</a> </td>
                        </tr>
                        <tr>
                            <td width="200" align="center">计算机英语</td>
                            <td width="100" align="center">李法敏</td>
                            <td width="100" align="center">英语类</td>
                            <td width="100" align="center">500</td>
                            <td width="100" align="center">上海外语教育</td>
                            <td width="50" align="center"><a href="#">删除</a> </td>
                        </tr>
                        <tr>
                            <td width="200" align="center">计算机网络教程</td>
                            <td width="100" align="center">谢钧</td>
                            <td width="100" align="center">IT类</td>
                            <td width="100" align="center">500</td>
                            <td width="100" align="center">人民邮电</td>
                            <td width="50" align="center"><a href="#">删除</a> </td>
                        </tr>
                        <tr>
                            <td width="200" align="center">英语听力教程</td>
                            <td width="100" align="center">张民伦</td>
                            <td width="100" align="center">英语类</td>
                            <td width="100" align="center">400</td>
                            <td width="100" align="center">高等教育</td>
                            <td width="50" align="center"><a href="#">删除</a> </td>
                        </tr>
                        <tr>
                            <td width="200" align="center">高等数学</td>
                            <td width="100" align="center">同济大学</td>
                            <td width="100" align="center">数学类</td>
                            <td width="100" align="center">250</td>
                            <td width="100" align="center">高等教育</td>
                            <td width="50" align="center"><a href="#">删除</a> </td>
                        </tr>
                        <tr>
                            <td width="200" align="center">数据库原理与应用</td>
                            <td width="100" align="center">许薇</td>
                            <td width="100" align="center">IT类</td>
                            <td width="100" align="center">100</td>
                            <td width="100" align="center">清华大学</td>
                            <td width="50" align="center"><a href="#">删除</a> </td>
                        </tr>
                        <tr>
                            <td width="200" align="center">javaweb程序设计</td>
                            <td width="100" align="center">黑马程序员</td>
                            <td width="100" align="center">IT类</td>
                            <td width="100" align="center">1000</td>
                            <td width="100" align="center">中国工信</td>
                            <td width="50" align="center"><a href="#">删除</a> </td>
                        </tr>
                        <tr>
                            <td width="200" align="center">C语言程序设计</td>
                            <td width="100" align="center">谭浩强</td>
                            <td width="100" align="center">IT类</td>
                            <td width="100" align="center">290</td>
                            <td width="100" align="center">清华大学</td>
                            <td width="50" align="center"><a href="#">删除</a> </td>
                        </tr>
                        <tr>
                            <td width="200" align="center">C++程序设计</td>
                            <td width="100" align="center">郑莉</td>
                            <td width="100" align="center">IT类</td>
                            <td width="100" align="center">230</td>
                            <td width="100" align="center">清华大学</td>
                            <td width="50" align="center"><a href="#">删除</a> </td>
                        </tr>
                    </table>
                </div>
                <!--添加图书信息-->
                <div class="content" id="addinformation" style="display: none">
                    <div style="border: 1px grey solid;height: 400px;width: 400px;margin-left: 350px;margin-top: 30px">
                        <div style="margin-top: 20px ;margin-left: 50px">
                            <td>图书名字</td>
                            <td><label for="name"></label><input type="text" id="name"></td><br/>
                        </div>
                        <div style="margin-top: 20px ;margin-left: 50px">
                            <td>图书作者</td>
                            <td><label for="person"></label><input type="text" id="person"></td><br/>
                        </div>
                        <div style="margin-top: 20px ;margin-left: 50px">
                            <td>图书类别</td>
                            <td><label for="type"></label><input type="text" id="type"></td><br/>
                        </div>
                        <div style="margin-top: 20px ;margin-left: 50px">
                            <td>图书库存</td>
                            <td><label for="number"></label><input type="text" id="number"></td><br/>
                        </div>
                        <div style="margin-top: 20px ;margin-left: 50px">
                            <td>图书出版</td>
                            <td><label for="editor"></label><input type="text" id="editor"></td><br/>
                        </div>
                        <button id="addbook" type="button" class="btn btn-outline-secondary" style="margin-top: 30px;margin-left: 140px">添加书本</button>
                    </div>
                </div>
            </div>

            <!--图书购买代码-->
            <div id="shopping" style="display: none">
                <div style="font-size: 2pc;margin-left: 500px;margin-top: 10px">图书购买商城</div>
                <!--it图书购买-->
                <div style="border: 2px grey solid;margin-top: 30px;margin-left: 10px;height: 400px;width: 400px">
                    <div style="font-size: 1.5pc;margin-left: 100px">IT类图书</div>
                    <table >
                        <tr>
                            <td width="100px" align="center">书名</td>
                            <td width="100px" align="center">价格(元)</td>
                            <td width="100px" align="center">数量</td>
                            <td width="100px" align="center"></td>
                        </tr>
                        <tr>
                            <td width="100px" align="center">java基础教程</td>
                            <td width="100px" align="center">60</td>
                            <td width="100px" align="center"><label>
                                <input type="text" style="width: 70px" >
                            </label></td>
                            <td width="100px" align="center"><button type="button" class="btn btn-link" name="addshop">加入订单</button></td>
                        </tr>
                        <tr>
                            <td width="100px" align="center">C程序设计教程</td>
                            <td width="100px" align="center">20</td>
                            <td width="100px" align="center"><label>
                                <input type="text" style="width: 70px">
                            </label></td>
                            <td width="100px" align="center"><button type="button" class="btn btn-link" name="addshop">加入订单</button></td>
                        </tr>
                        <tr>
                            <td width="100px" align="center">javaweb设计教程</td>
                            <td width="100px" align="center">70</td>
                            <td width="100px" align="center"><label>
                                <input type="text" style="width: 70px">
                            </label></td>
                            <td width="100px" align="center"><button type="button" class="btn btn-link" name="addshop">加入订单</button></td>
                        </tr>
                        <tr>
                            <td width="100px" align="center">python3程序设计</td>
                            <td width="100px" align="center">50</td>
                            <td width="100px" align="center"><label>
                                <input type="text" style="width: 70px">
                            </label></td>
                            <td width="100px" align="center"><button type="button" class="btn btn-link" name="addshop">加入订单</button></td>
                        </tr>
                        <tr>
                            <td width="100px" align="center">计算机网络教程</td>
                            <td width="100px" align="center">45</td>
                            <td width="100px" align="center"><label>
                                <input type="text" style="width: 70px">
                            </label></td>
                            <td width="100px" align="center"><button type="button" class="btn btn-link" name="addshop">加入订单</button></td>
                        </tr>
                        <tr>
                            <td width="100px" align="center">数据结构</td>
                            <td width="100px" align="center">35</td>
                            <td width="100px" align="center"><label>
                                <input type="text" style="width: 70px">
                            </label></td>
                            <!--加入我的订单按钮-->
                            <td width="100px" align="center"><button type="button" class="btn btn-link" name="addshop">加入订单</button></td>
                        </tr>
                    </table>
                </div>
                <!--英语图书购买-->
                <div style="border: 2px grey solid;height: 400px;width: 400px;position: absolute;z-index: auto;left: 430px;top: 200px">
                    <div style="font-size: 1.5pc;margin-left: 100px">英语类图书</div>
                    <table >
                        <tr>
                            <td width="100px" align="center">书名</td>
                            <td width="100px" align="center">价格(元)</td>
                            <td width="100px" align="center">数量</td>
                            <td width="100px" align="center"></td>
                        </tr>
                        <tr>
                            <td width="100px" align="center">四级词汇</td>
                            <td width="100px" align="center">10</td>
                            <td width="100px" align="center"><label>
                                <input type="text" style="width: 70px">
                            </label></td>
                            <td width="100px" align="center"><button type="button" class="btn btn-link" name="addshop">加入订单</button></td>
                        </tr>
                        <tr>
                            <td width="100px" align="center">计算机英语</td>
                            <td width="100px" align="center">40</td>
                            <td width="100px" align="center"><label>
                                <input type="text" style="width: 70px">
                            </label></td>
                            <td width="100px" align="center"><button type="button" class="btn btn-link" name="addshop">加入订单</button></td>
                        </tr>
                        <tr>
                            <td width="100px" align="center">大学英语综合教程</td>
                            <td width="100px" align="center">50</td>
                            <td width="100px" align="center"><label>
                                <input type="text" style="width: 70px">
                            </label></td>
                            <td width="100px" align="center"><button type="button" class="btn btn-link" name="addshop">加入订单</button></td>
                        </tr>
                        <tr>
                            <td width="100px" align="center">大学英语视听说</td>
                            <td width="100px" align="center">55</td>
                            <td width="100px" align="center"><label>
                                <input type="text" style="width: 70px">
                            </label></td>
                            <td width="100px" align="center"><button type="button" class="btn btn-link" name="addshop">加入订单</button></td>
                        </tr>
                        <tr>
                            <td width="100px" align="center">四级写作</td>
                            <td width="100px" align="center">43</td>
                            <td width="100px" align="center"><label>
                                <input type="text" style="width: 70px">
                            </label></td>
                            <td width="100px" align="center"><button type="button" class="btn btn-link" name="addshop">加入订单</button></td>
                        </tr>
                        <tr>
                            <td width="100px" align="center">大学英语四级考试教程</td>
                            <td width="100px" align="center">33</td>
                            <td width="100px" align="center"><label>
                                <input type="text" style="width: 70px">
                            </label></td>
                            <!--加入我的订单按钮-->
                            <td width="100px" align="center"><button type="button" class="btn btn-link" name="addshop">加入订单</button></td>
                        </tr>
                    </table>
                </div>
                <!--数学类图书-->
                <div style="border: 2px grey solid;height: 400px;width: 400px;position: absolute;z-index: auto;left: 850px;top: 200px">
                    <div style="font-size: 1.5pc;margin-left: 100px">数学类图书</div>
                    <table >
                        <tr>
                            <td width="100px" align="center">书名</td>
                            <td width="100px" align="center">价格(元)</td>
                            <td width="100px" align="center">数量</td>
                            <td width="100px" align="center"></td>
                        </tr>
                        <tr>
                            <td width="100px" align="center">高等数学上册</td>
                            <td width="100px" align="center">20</td>
                            <td width="100px" align="center"><label>
                                <input type="text" style="width: 70px">
                            </label></td>
                            <td width="100px" align="center"><button type="button" class="btn btn-link" name="addshop">加入订单</button></td>
                        </tr>
                        <tr>
                            <td width="100px" align="center">离散数学</td>
                            <td width="100px" align="center">40</td>
                            <td width="100px" align="center"><label>
                                <input type="text" style="width: 70px">
                            </label></td>
                            <td width="100px" align="center"><button type="button" class="btn btn-link" name="addshop">加入订单</button></td>
                        </tr>
                        <tr>
                            <td width="100px" align="center">概率论与数理统计</td>
                            <td width="100px" align="center">34</td>
                            <td width="100px" align="center"><label>
                                <input type="text" style="width: 70px">
                            </label></td>
                            <td width="100px" align="center"><button type="button" class="btn btn-link" name="addshop">加入订单</button></td>
                        </tr>
                        <tr>
                            <td width="100px" align="center">高等数学下册</td>
                            <td width="100px" align="center">25</td>
                            <td width="100px" align="center"><label>
                                <input type="text" style="width: 70px">
                            </label></td>
                            <td width="100px" align="center"><button type="button" class="btn btn-link" name="addshop">加入订单</button></td>
                        </tr>
                        <tr>
                            <td width="100px" align="center">线性代数</td>
                            <td width="100px" align="center">35</td>
                            <td width="100px" align="center"><label>
                                <input type="text" style="width: 70px">
                            </label></td>
                            <td width="100px" align="center"><button type="button" class="btn btn-link" name="addshop">加入订单</button></td>
                        </tr>
                        <tr>
                            <td width="100px" align="center">复数函数</td>
                            <td width="100px" align="center">55</td>
                            <td width="100px" align="center"><label>
                                <input type="text" style="width: 70px">
                            </label></td>
                            <!--加入我的订单按钮-->
                            <td width="100px" align="center"><button type="button" class="btn btn-link" name="addshop">加入订单</button></td>
                        </tr>
                    </table>
                </div>

            </div>

            <!--我的订单代码-->
            <div id="mybill">
                <table  border="1" cellspacing="0" style="margin-left: 300px;margin-top: 30px" id="shoptable">
                    <tr>
                        <td colspan="4" align="center" style="font-size: 25px">我的订单</td>
                    </tr>
                    <tr>
                        <td width="180" align="center">书名</td>
                        <td width="180" align="center">单价(元)</td>
                        <td width="180" align="center">数量</td>
                        <td width="180" align="center">总价(元)</td>
                    </tr>
                </table>

            </div>

            <!--图书管理员代码-->
            <div id="people">
                <!--按钮切换-->
                <div>
                    <button id="button1" type="button" class="btn btn-outline-secondary" style="margin-left: 450px;margin-top: 30px">员工信息</button>
                    <button id="button2" type="button" class="btn btn-outline-secondary" style="margin-left: 180px;margin-top: 30px;">员工添加</button>
                </div>
                <!--员工信息表-->
                <div id="table1">
                    <table id="personinformation" align="center" border="1" cellspacing="0" style="margin-top: 30px">
                        <tr>
                            <td style="font-size: 1.5pc" align="center" colspan="4">员工信息</td>
                        </tr>
                        <tr>
                            <td width="160px" align="center" >姓名</td>
                            <td width="160px" align="center">编号</td>
                            <td width="160px" align="center" >账号</td>
                            <td width="160px" align="center" >密码</td>
                        </tr>
                        <tr>
                            <td width="160px" align="center" >小明</td>
                            <td width="160px" align="center">id202001</td>
                            <td width="160px" align="center" >12345</td>
                            <td width="160px" align="center" >54321</td>
                        </tr>
                        <tr>
                            <td width="160px" align="center" >张山</td>
                            <td width="160px" align="center">id202002</td>
                            <td width="160px" align="center" >7890</td>
                            <td width="160px" align="center" >0987</td>
                        </tr>
                        <tr>
                            <td width="160px" align="center" >李明</td>
                            <td width="160px" align="center">id202003</td>
                            <td width="160px" align="center" >3456</td>
                            <td width="160px" align="center" >6543</td>
                        </tr>
                        <tr>
                            <td width="160px" align="center" >陈明</td>
                            <td width="160px" align="center">id202004</td>
                            <td width="160px" align="center" >33333</td>
                            <td width="160px" align="center" >33333</td>
                        </tr>
                    </table>
                </div>

                <!--添加员工信息表-->
                <table id="addtable" align="center" border="1" cellspacing="0" width="300px" style="display: none;margin-top: 30px">
                    <tr align="center">
                        <td width="50px" height="70px">姓名</td>
                        <td ><label for="name1"></label><input type="text" id="name1" ></td>
                    </tr>
                    <tr align="center">
                        <td width="50px" height="70px">编号</td>
                        <td><label for="id"></label><input type="text" id="id"></td>
                    </tr>
                    <tr align="center">
                        <td width="50px" height="70px">账号</td>
                        <td><input type="text" id="text"></td>
                    </tr>
                    <tr align="center">
                        <td width="50px" height="70px">密码</td>
                        <td><label for="password"></label><input type="text" id="password"></td>
                    </tr>
                    <tr align="center">
                        <td colspan="2" width="50px" height="70px"><button id="addperson" type="button" class="btn btn-secondary btn-lg">添加信息</button></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

 

 

 

 

 


点击全文阅读


本文链接：http://zhangshiyu.com/post/35023.html

订单  图书  添加  
<< 上一篇 下一篇 >>

  • 评论（0）
  • 赞助本站

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

最新文章

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1