Library management system website (Application Technology: bootstrap, jQuery, JavaScript)

01? 2022-02-13 07:34:39 阅读数:987

library management website application technology

Application jquery Button event to achieve page switching , Add , as well as css beautify , With the help of bootstrap Beautify the page

Entering the system is the login interface , When the account and password are empty , You will be prompted that the account password cannot be empty

Click registration , Then jump into the registration interface , If any item in the registration is blank, it is a reminder and cannot be , After clicking Register now, you will jump back to the login interface

   

  Click login to enter the main interface

The first function : Click library management to enter the library management interface , Click the add book button on the left to switch to the add interface

 

  Click add book , The book information is added to the end of the table

Second function : Click the book purchase button , There will be a shopping mall , Click my order to open my order interface

  Enter quantity in book purchase , Click the... Of the book you want to add , Click add order , You can view in my order , The total price will be calculated in my order

 

  The third function : Click the librarian to enter the employee management interface

 

Click the add employee button to add employee information  

Login interface code  

<!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 (){
// Login button binding event
$("#button1").click(function () {
if($("#name").val()==""){
alert(" The username cannot be empty ")
return false
}
if($("#colFormLabelLg").val()==""){
alert(" Password cannot be empty ")
return false
}else {
alert(" Landing successful ")
location.href=" home page .html"
}
})
// Register button binding events
$("#button2").click(function () {
if(confirm(" Are you sure to enter the registration interface ?")){
location.href=" register .html"
}
})
})
</script>
<style>
/* Set the title style */
#div1{
color: #5c636a;
font-size: xxx-large;
margin-left: 500px;
margin-top: 0px;
}
/* Background image settings */
#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" >
The book management system
</div>
<!-- Content area -->
<div id="div2">
<!-- Login box settings -->
<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"> The user account </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"> User password </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"> land </button>
<button class="btn btn-secondary" type="button" style="position: absolute;top: 340px;left: 762px" id="button2"> register </button>
</div>
</div>
</body>
</html>

  Registration interface code

 

<!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 (){
// Judge user name , password , Telephone , Whether the mailbox is empty
$("#button").click(function () {
if($("#name").val()==""){
alert(" The username cannot be empty ")
return false
}
if($("#password").val()==""){
alert(" The password cannot be empty ")
return false
}
if($("#phone").val()==""){
alert(" Phone cannot be empty ")
return false
}
if($("#colFormLabelLg").val()==""){
alert(" The mailbox cannot be empty ")
return false
}
else{
location.href=" land .html"
}
})
})
</script>
<style>
/*-- Set picture background */
#div{
background: url("../picture/04.jpg") no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
width: 1278px;
height: 598px;
}
/* Set the title style */
#div1{
color: black;
font-size: xxx-large;
margin-left: 500px;
margin-top: 0px;
}
/* Set the registered border style */
#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">
<!-- Title Area -->
<div id="div1" >
The book management system
</div>
<!-- Registration area -->
<div id="div2">
<!-- Registration module -->
<form class="row g-3" >
<!--col-sm-3 Set column width -->
<label for="colFormLabelLg" class="col-sm-3 col-form-label col-form-label-lg"> The user account </label>
<div class="col-sm-8">
<input type="text" class="form-control form-control-lg" id="name" >
</div>
<!-- Password to fill out -->
<label for="colFormLabelLg" class="col-sm-3 col-form-label col-form-label-lg"> User password </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"> Phone number </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"> email </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>---- Please select a province ----</option>
<option>------- guangdong -------</option>
<option>------- guizhou -------</option>
<option>------- hubei -------</option>
<option>------- hunan -------</option>
<option>------- fujian -------</option>
</select>
</div>
<div class="col-md-6">
<label for="inputState" class="form-label"></label>
<select id="hobby" class="form-select">
<option selected>---- Please select the establishment time ----</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"> Register now </button>
</div>
</form>
</div>
</div>
</body>
</html>

                Main interface code

<!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 (){
// Delete function reuse
var detelefun=function (){
var detele=$(this).parent().parent()
var tip=detele.find("td:first").text()
if(confirm(" Whether or not to delete "+tip+" Do you ?")){
detele.remove()
}
return false
}
// Book information button
$("#inform").click(function () {
$("#information").toggle()
$("#addinformation").toggle()
})
// Add book information
$("#add").click(function () {
$("#addinformation").toggle()
$("#information").toggle()
})
// Remove the label
$("a").click(detelefun)
// Add labels to books
$("#addbook").click(function () {
// Get text box content
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=\"#\"> Delete </a> </td>\n" +
" </tr>")
book.appendTo($("#table"))
book.find("a").click(detelefun)
alert(" add to "+name+" Book Success ")
return false
})
// Add order button binding event
$("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(" Successful addition "+name+" Books enter my order ")
return true
})
// Four function switching buttons
$("#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()
})
// Add employee button add event
$("#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(" add to "+name+" Employee information success ")
})
// Information button and add button binding event
$("#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>
/* Add background image */
#div3{
background:url("../picture/ background .jpg") no-repeat;
background-size: 100% 100%;
height: 510px;
}
/* Set the background to white and transparent */
#son{
background-color: white;
height: 510px;
background-color: rgba(255,255,255,0.8);
}
/* Functional area edge style */
.fun{
border:3px #5c636a solid;
height: 510px;
width: 200px;
}
/* Content area framework */
.content{
border:3px #5c636a solid;
height: 510px;
width: 1060px;
position: absolute;
z-index: 1;
top: 110px;
left: 200px;
}
/* The position of the first button on the ribbon */
.location1{
margin-top: 150px;
margin-left: 40px;
}
/* The position of the second button on the ribbon */
.location2{
margin-top: 100px;
margin-left: 40px;
}
/* Table location */
#table{
margin-top: 50px;
margin-left: 200px;
}
/* Set and add book information border */
</style>
</head>
<body>
<!-- Title Area -->
<div id="div1">
The book management system
</div>
<!-- Select the functional area -->
<div style="background-color: slategrey">
<!-- The function selection is divided into four parts -->
<div class="container">
<div class="row align-items-start">
<div class="col">
<!-- Set button -->
<div class="d-grid gap-2">
<button class="btn btn-outline-secondary" type="button" style="color: black" id="manger"> Book management </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"> Book buying </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"> My 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"> librarian </button>
</div>
</div>
</div>
</div>
</div>
<!-- Content area -->
<div id="div3">
<div id="son">
<!-- Library management code -->
<div id="book">
<!-- Book function selection -->
<div class="fun" id="function">
<button type="button" class="btn btn-secondary location1" id="inform"> Book information </button>
<button type="button" class="btn btn-secondary location2" id="add"> Add books </button>
</div>
<!-- Book information code -->
<div class="content" id="information" >
<table border="2" id="table">
<tr>
<td width="200" align="center"> Title </td>
<td width="100" align="center"> author </td>
<td width="100" align="center"> Category </td>
<td width="100" align="center"> stock </td>
<td width="100" align="center"> Press. </td>
<td width="50" align="center"></td>
</tr>
<tr>
<td width="200" align="center">java Basic case tutorial </td>
<td width="100" align="center"> Black horse programmer </td>
<td width="100" align="center">IT class </td>
<td width="100" align="center">100</td>
<td width="100" align="center"> People's post and Telecommunications </td>
<td width="50" align="center"><a href="#"> Delete </a> </td>
</tr>
<tr>
<td width="200" align="center">python3 Programming </td>
<td width="100" align="center"> Tang Yonghua </td>
<td width="100" align="center">IT class </td>
<td width="100" align="center">500</td>
<td width="100" align="center"> People's post and Telecommunications </td>
<td width="50" align="center"><a href="#"> Delete </a> </td>
</tr>
<tr>
<td width="200" align="center"> Probability theory and mathematical statistics </td>
<td width="100" align="center"> Ma Xinmin </td>
<td width="100" align="center"> Mathematics </td>
<td width="100" align="center">500</td>
<td width="100" align="center"> The machinery industry </td>
<td width="50" align="center"><a href="#"> Delete </a> </td>
</tr>
<tr>
<td width="200" align="center"> data structure </td>
<td width="100" align="center"> YanWeiMin </td>
<td width="100" align="center">IT class </td>
<td width="100" align="center">500</td>
<td width="100" align="center"> People's post and Telecommunications </td>
<td width="50" align="center"><a href="#"> Delete </a> </td>
</tr>
<tr>
<td width="200" align="center"> Computer English </td>
<td width="100" align="center"> Li famin </td>
<td width="100" align="center"> English </td>
<td width="100" align="center">500</td>
<td width="100" align="center"> Shanghai foreign language education </td>
<td width="50" align="center"><a href="#"> Delete </a> </td>
</tr>
<tr>
<td width="200" align="center"> Computer network course </td>
<td width="100" align="center"> Xie Jun </td>
<td width="100" align="center">IT class </td>
<td width="100" align="center">500</td>
<td width="100" align="center"> People's post and Telecommunications </td>
<td width="50" align="center"><a href="#"> Delete </a> </td>
</tr>
<tr>
<td width="200" align="center"> English Listening Course </td>
<td width="100" align="center"> Zhang minlun </td>
<td width="100" align="center"> English </td>
<td width="100" align="center">400</td>
<td width="100" align="center"> Higher education </td>
<td width="50" align="center"><a href="#"> Delete </a> </td>
</tr>
<tr>
<td width="200" align="center"> Advanced mathematics </td>
<td width="100" align="center"> Tongji University </td>
<td width="100" align="center"> Mathematics </td>
<td width="100" align="center">250</td>
<td width="100" align="center"> Higher education </td>
<td width="50" align="center"><a href="#"> Delete </a> </td>
</tr>
<tr>
<td width="200" align="center"> Database principle and application </td>
<td width="100" align="center"> Xu Wei </td>
<td width="100" align="center">IT class </td>
<td width="100" align="center">100</td>
<td width="100" align="center"> Tsinghua University </td>
<td width="50" align="center"><a href="#"> Delete </a> </td>
</tr>
<tr>
<td width="200" align="center">javaweb Programming </td>
<td width="100" align="center"> Black horse programmer </td>
<td width="100" align="center">IT class </td>
<td width="100" align="center">1000</td>
<td width="100" align="center"> China industry and information technology </td>
<td width="50" align="center"><a href="#"> Delete </a> </td>
</tr>
<tr>
<td width="200" align="center">C Language programming </td>
<td width="100" align="center"> Tan Haoqiang </td>
<td width="100" align="center">IT class </td>
<td width="100" align="center">290</td>
<td width="100" align="center"> Tsinghua University </td>
<td width="50" align="center"><a href="#"> Delete </a> </td>
</tr>
<tr>
<td width="200" align="center">C++ Programming </td>
<td width="100" align="center"> Zheng Li </td>
<td width="100" align="center">IT class </td>
<td width="100" align="center">230</td>
<td width="100" align="center"> Tsinghua University </td>
<td width="50" align="center"><a href="#"> Delete </a> </td>
</tr>
</table>
</div>
<!-- Add book information -->
<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> Book name </td>
<td><label for="name"></label><input type="text" id="name"></td><br/>
</div>
<div style="margin-top: 20px ;margin-left: 50px">
<td> Book author </td>
<td><label for="person"></label><input type="text" id="person"></td><br/>
</div>
<div style="margin-top: 20px ;margin-left: 50px">
<td> Book category </td>
<td><label for="type"></label><input type="text" id="type"></td><br/>
</div>
<div style="margin-top: 20px ;margin-left: 50px">
<td> Book inventory </td>
<td><label for="number"></label><input type="text" id="number"></td><br/>
</div>
<div style="margin-top: 20px ;margin-left: 50px">
<td> Book publishing </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"> Add books </button>
</div>
</div>
</div>
<!-- Book purchase code -->
<div id="shopping" style="display: none">
<div style="font-size: 2pc;margin-left: 500px;margin-top: 10px"> Book shopping mall </div>
<!--it Book buying -->
<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 Books </div>
<table >
<tr>
<td width="100px" align="center"> Title </td>
<td width="100px" align="center"> Price ( element )</td>
<td width="100px" align="center"> Number </td>
<td width="100px" align="center"></td>
</tr>
<tr>
<td width="100px" align="center">java Basic course </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"> Join order </button></td>
</tr>
<tr>
<td width="100px" align="center">C Programming tutorial </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"> Join order </button></td>
</tr>
<tr>
<td width="100px" align="center">javaweb Design tutorial </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"> Join order </button></td>
</tr>
<tr>
<td width="100px" align="center">python3 Programming </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"> Join order </button></td>
</tr>
<tr>
<td width="100px" align="center"> Computer network course </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"> Join order </button></td>
</tr>
<tr>
<td width="100px" align="center"> data structure </td>
<td width="100px" align="center">35</td>
<td width="100px" align="center"><label>
<input type="text" style="width: 70px">
</label></td>
<!-- Add my order button -->
<td width="100px" align="center"><button type="button" class="btn btn-link" name="addshop"> Join order </button></td>
</tr>
</table>
</div>
<!-- English book purchase -->
<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"> English books </div>
<table >
<tr>
<td width="100px" align="center"> Title </td>
<td width="100px" align="center"> Price ( element )</td>
<td width="100px" align="center"> Number </td>
<td width="100px" align="center"></td>
</tr>
<tr>
<td width="100px" align="center"> Level 4 vocabulary </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"> Join order </button></td>
</tr>
<tr>
<td width="100px" align="center"> Computer English </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"> Join order </button></td>
</tr>
<tr>
<td width="100px" align="center"> College English comprehensive course </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"> Join order </button></td>
</tr>
<tr>
<td width="100px" align="center"> College English audio visual speaking </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"> Join order </button></td>
</tr>
<tr>
<td width="100px" align="center"> Level 4 Writing </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"> Join order </button></td>
</tr>
<tr>
<td width="100px" align="center"> College English Test Band 4 course </td>
<td width="100px" align="center">33</td>
<td width="100px" align="center"><label>
<input type="text" style="width: 70px">
</label></td>
<!-- Add my order button -->
<td width="100px" align="center"><button type="button" class="btn btn-link" name="addshop"> Join order </button></td>
</tr>
</table>
</div>
<!-- Math books -->
<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"> Math books </div>
<table >
<tr>
<td width="100px" align="center"> Title </td>
<td width="100px" align="center"> Price ( element )</td>
<td width="100px" align="center"> Number </td>
<td width="100px" align="center"></td>
</tr>
<tr>
<td width="100px" align="center"> Advanced mathematics volume 1 </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"> Join order </button></td>
</tr>
<tr>
<td width="100px" align="center"> Discrete Mathematics </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"> Join order </button></td>
</tr>
<tr>
<td width="100px" align="center"> Probability theory and mathematical statistics </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"> Join order </button></td>
</tr>
<tr>
<td width="100px" align="center"> Advanced mathematics volume II </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"> Join order </button></td>
</tr>
<tr>
<td width="100px" align="center"> linear algebra </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"> Join order </button></td>
</tr>
<tr>
<td width="100px" align="center"> Complex function </td>
<td width="100px" align="center">55</td>
<td width="100px" align="center"><label>
<input type="text" style="width: 70px">
</label></td>
<!-- Add my order button -->
<td width="100px" align="center"><button type="button" class="btn btn-link" name="addshop"> Join order </button></td>
</tr>
</table>
</div>
</div>
<!-- My order code -->
<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"> My order </td>
</tr>
<tr>
<td width="180" align="center"> Title </td>
<td width="180" align="center"> The unit price ( element )</td>
<td width="180" align="center"> Number </td>
<td width="180" align="center"> The total price ( element )</td>
</tr>
</table>
</div>
<!-- Librarian code -->
<div id="people">
<!-- Button switch -->
<div>
<button id="button1" type="button" class="btn btn-outline-secondary" style="margin-left: 450px;margin-top: 30px"> Employee information </button>
<button id="button2" type="button" class="btn btn-outline-secondary" style="margin-left: 180px;margin-top: 30px;"> Employees add </button>
</div>
<!-- Employee information form -->
<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"> Employee information </td>
</tr>
<tr>
<td width="160px" align="center" > full name </td>
<td width="160px" align="center"> Number </td>
<td width="160px" align="center" > account number </td>
<td width="160px" align="center" > password </td>
</tr>
<tr>
<td width="160px" align="center" > Xiao Ming </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" > Zhang Shan </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" > Li Ming </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" > state </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>
<!-- Add employee information table -->
<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"> full name </td>
<td ><label for="name1"></label><input type="text" id="name1" ></td>
</tr>
<tr align="center">
<td width="50px" height="70px"> Number </td>
<td><label for="id"></label><input type="text" id="id"></td>
</tr>
<tr align="center">
<td width="50px" height="70px"> account number </td>
<td><input type="text" id="text"></td>
</tr>
<tr align="center">
<td width="50px" height="70px"> password </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"> Add information </button></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

 

 

 

 

 

copyright:author[01?],Please bring the original link to reprint, thank you. https://en.javamana.com/2022/02/202202130734360475.html