運用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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/304772.html
標籤：其他
上一篇：如何在vue頁面中引入其他的子組件？(區域引入/全域引入)
下一篇：vue生命周期鉤子函式