运用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>?
?
?
?
?