前端 管理員界面html和js
<html>
<head>
<title>圖書(shū)管理系統(tǒng)</title>
<meta charset="utf-8" />
<style type="text/css">
body{
background: #D5D5D5;
background-image:url("http://39.105.124.213/libriaryImg/managerbackground.JPG");
background-repeat:no-repeat;
background-attachment: fixed;
background-size: cover;
}
hr{
color: red;
}
.tab{
border-collapse: collapse;
margin: auto;
}
.tab td{
padding: 10px;
}
h3,.tab,h4{
text-align: center;
}
.searchText{
padding-left: 20px;
}
</style>
</head>
<body >
<h3>圖書(shū)管理系統(tǒng)</h3>
<hr/>
<h4>添加圖書(shū)</h4>
<table class="tab">
<tr>
<td>書(shū)籍id:</td>
<td><input type="text" id="bookId" name=""></td>
<td>書(shū)籍名稱:</td>
<td><input type="text" id="bookName" name=""></td>
</tr>
<tr>
<td>書(shū)籍信息:</td>
<td><input type="text" id="bookInfo" name=""></td>
<td>書(shū)籍總數(shù)量:</td>
<td><input type="text" id="bookTotal" name=""></td>
</tr>
<tr>
<td>按名字查詢書(shū)籍:</td>
<td><input type="text" id="searchById" ></td>
<td>按id查詢書(shū)籍:</td>
<td><input type="text" id="searchByName" ></td>
</tr>
<tr>
<td><input type="button" value="添加書(shū)籍" onclick="addBook()" ></td>
<td><input type="button" value="查詢書(shū)籍" name="" onclick="searchBook()" ></td>
<td><input type="button" value="刪除選中行" name="" onclick="choseDel()" ></td>
<td><input type="button" value="修改密碼" onclick="changePwd()" ></td>
</tr>
</table>
<h3>圖書(shū)查詢</h3>
<hr/>
<table border="1" class="tab" id="tab">
<tr id="t1">
<td><input type="checkbox" id="checkAll" onclick="choseAll()"></td>
<td>書(shū)籍id</td>
<td>書(shū)籍名稱</td>
<td>書(shū)籍信息:</td>
<td>書(shū)籍總數(shù)</td>
<td>書(shū)籍已借出</td>
<td>書(shū)籍剩余量</td>
<td>操作</td>
</tr>
</table>
<script type="text/javascript">
var ip="192.168.43.241:8888";
var split = "|^|";
var split2 = "|$|";
//獲取本地賬號(hào)密碼
var usr=localStorage.getItem("usr").trim();
var pwd=localStorage.getItem("pwd").trim();
//登錄信息
var str="usr="+usr+"&"+"pwd="+pwd;
//修改密碼
function changePwd(){
window.open("http://"+ip+"/change_pwd.html?"+str,"blank");
}
//添加書(shū)籍
function addBook(){
//獲取要添加的數(shù)據(jù)
var bookId = document.getElementById('bookId').value.trim();
var bookName = document.getElementById('bookName').value.trim();
var bookInfo = document.getElementById('bookInfo').value.trim();
var bookTotal = document.getElementById('bookTotal').value.trim();
//判斷數(shù)據(jù)是否為空
if(bookId == "" || bookId == null){
alert("書(shū)籍編號(hào)不能為空");
return;
}
if(bookName == "" || bookName == null){
alert("書(shū)籍名不能為空");
return;
}
if(bookInfo == "" || bookInfo == null){
alert("書(shū)籍描述不能為空");
return;
}
if(bookTotal == "" || bookTotal == null){
alert("書(shū)籍總數(shù)量不能為空");
return;
}
//1.創(chuàng)建ajax對(duì)象
var xhr = new XMLHttpRequest();
//2.確定參數(shù)（請(qǐng)求方法，請(qǐng)求地址，是否異步）
var string='&bookId='+bookId;
string+='&bookName='+bookName;
string+='&bookInfo='+bookInfo;
string+='&bookTotal='+bookTotal;
var url="http://"+ip+"/addBook";
xhr.open('post',url,true);
//3.發(fā)送請(qǐng)求
xhr.send(str+string);
xhr.responseType = 'Text';
//處理返回結(jié)果
xhr.onload = function(){
var result=xhr.response;
console.log(xhr.status)
if(xhr.status=="200"){
if("addOk"==result){
alert("添加成功!!!");
addRow(bookId,bookName,bookInfo,bookTotal,bookTotal,0);
}else if("bookIdRepeat") {
alert("bookId重復(fù)");
}
}else{
document.getElementsByClassName('body').value=result;
document.write(result);
}
}
}
//查詢書(shū)籍
function searchBook(){
//獲取要查詢的數(shù)據(jù)
var bookId = document.getElementById('searchById').value.trim();
var bookName = document.getElementById('searchByName').value.trim();
//判斷數(shù)據(jù)是否為空
if((bookId == "" || bookId == null)&&(bookName == "" || bookName == null)){
alert("書(shū)籍id,或者書(shū)籍名字填且僅填其中一個(gè)，其中書(shū)籍名字查詢支持模糊查詢");
return;
}else if((bookId != "" && bookId != null)&&(bookName != "" && bookName != null)){
alert("書(shū)籍id,或者書(shū)籍名字只能填其中一個(gè)");
return;
}
//查詢方式
var flag=false;
if("" != bookName && null != bookName){
var flag=false;
}else if("" != bookId && null != bookId){
var flag=true;
}
//1.創(chuàng)建ajax對(duì)象
var xhr = new XMLHttpRequest();
//2.確定參數(shù)（請(qǐng)求方法，請(qǐng)求地址，是否異步）
var url;
var string;
if(flag){
url="http://"+ip+"/searchByName";
string="&bookName="+bookId;
}else{
url="http://"+ip+"/searchById";
string="&bookId="+bookName;
}
xhr.open('post',url,true);
//3.發(fā)送請(qǐng)求
xhr.send(str+string);
xhr.responseType = 'Text';
//處理返回結(jié)果
xhr.onload = function(){
var result=xhr.response;
console.log(result.trim());
if(xhr.status=="200"){
if("nobook"==result){
alert("沒(méi)有結(jié)果!!!");
}else{
//45&jk&jkk&
var array = new Array();
array = result.split(split2);
removeEmpty(array);
console.log(array);
for(var i=0;i<array.length;i++){
array[i]=array[i].split(split);
removeEmpty(array[i]);
}
addMultipleRow(array);
}
}else{
console.log(xhr.status)
document.getElementsByClassName('body').value=result;
document.write(result);
}
}
}
//去除數(shù)組中空字符串
function removeEmpty(array){
for(var i = 0;i<array.length;i++){
if(array[i]==''||array[i]==null||typeof(array[i])==undefined){
array.splice(i,1);
i=i-1;
}
}
}
//添加行
function addRow(bookId,bookName,bookInfo,bookTotal,bookNum,bookLoan){
//獲取table對(duì)象
var tab = document.getElementById('tab');
//添加行
var tr = tab.insertRow(1);
//添加單元格
var cell0 = tr.insertCell(0);
cell0.innerHTML = "<input type='checkbox' name='check'>";
var cell1 = tr.insertCell(1);
cell1.innerHTML = bookId;
var cell2 = tr.insertCell(2);
cell2.innerHTML = bookName;
var cell3 = tr.insertCell(3);
cell3.innerHTML = bookInfo;
var cell4 = tr.insertCell(4);
cell4.innerHTML = bookTotal;
var cell5 = tr.insertCell(5);
cell5.innerHTML = bookNum;
var cell6 = tr.insertCell(6);
cell6.innerHTML = bookLoan;
var cell7 = tr.insertCell(7);
cell7.innerHTML = "<input type='button' value='修改' onclick='upadteRow(this)'> <input type='button' value='保存' onclick='upadteDb(this)'>";
}
//添加多行
function addMultipleRow(bookArray){
delAllRows();
for(var i=0;i<bookArray.length;i++){
addRow(bookArray[i][0], bookArray[i][1], bookArray[i][2], bookArray[i][3],bookArray[i][4], bookArray[i][3]-bookArray[i][4])
}
}
//刪除所有行
function delAllRows(){
//獲取到表格對(duì)象
var tab = document.getElementById('tab');
//獲取所有的name為check的復(fù)選框
var check = document.getElementsByName('check');
for(var i=0; i<check.length; i++){
tab.deleteRow(i+1);
i--;
}
}
//刪除選中行
function choseDel(){
//獲取到表格對(duì)象
var tab = document.getElementById('tab');
//獲取所有的name為check的復(fù)選框
var check = document.getElementsByName('check');
var array=new Array();
for(var i=0; i<check.length; i++){
//判斷哪些是選中的單選框
if(check[i].checked == true){
//獲取單元格對(duì)象
var myNode=check[i].parentNode;
var bookIdParent = myNode.nextElementSibling;
var bookId=bookIdParent.innerHTML;
array[array.length]=bookId;
}
}
console.log(array);
sendDeletToServer(array);
}
//發(fā)送要?jiǎng)h除書(shū)籍ID到服務(wù)器
function sendDeletToServer(array){
var booksId="";
for(var i=0;i<array.length;i++){
booksId+=array[i]+split;
}
//1.創(chuàng)建ajax對(duì)象
var xhr = new XMLHttpRequest();
//2.確定參數(shù)（請(qǐng)求方法，請(qǐng)求地址，是否異步）
var url="http://"+ip+"/deleteBooks";
xhr.open('post',url,true);
//3.發(fā)送請(qǐng)求
var string="&booksId="+booksId;
xhr.send(str+string);
xhr.responseType = 'Text';
//處理返回結(jié)果
xhr.onload = function(){
var result=xhr.response;
console.log(xhr.status)
if(xhr.status=="200"){
if("deleteOk"==result){
alert("刪除成功!!!");
//獲取到表格對(duì)象
var tab = document.getElementById('tab');
//獲取所有的name為check的復(fù)選框
var check = document.getElementsByName('check');
for(var i=0; i<check.length; i++){
//判斷哪些是選中的復(fù)選框
if(check[i].checked == true){
//刪除選中行
tab.deleteRow(i+1);
i--;
}
}
}else if("deletefals"==result) {
alert("刪除失敗");
}
}else{
console.log(xhr.status)
document.getElementsByClassName('body').value=result;
document.write(result);
}
}
}
//修改功能
function upadteRow(btn){
//獲取單元格對(duì)象
var cell1 = btn.parentNode.previousElementSibling;
//判斷cell.innerHTML的內(nèi)容是不是數(shù)字
if(!isNaN(cell1.innerHTML)){
//修改單元格內(nèi)容
cell1.innerHTML = "<input type='text' value='"+cell1.innerHTML+"' onblur='updateRowOver1(this)' autofocus/>";
}
var cell2 = cell1.previousElementSibling;
//判斷cell.innerHTML的內(nèi)容是不是數(shù)字
if(!isNaN(cell2.innerHTML)){
//修改單元格內(nèi)容
cell2.innerHTML = "<input type='text' value='"+cell2.innerHTML+"' onblur='updateRowOver1(this)' autofocus/>";
}
var cell3 = cell2.previousElementSibling;
cell3.innerHTML = "<input type='text' value='"+cell3.innerHTML+"' onblur='updateRowOver2(this)' autofocus/>";
var cell4 = cell3.previousElementSibling;
//修改單元格內(nèi)容
cell4.innerHTML = "<input type='text' value='"+cell4.innerHTML+"' onblur='updateRowOver2(this)' autofocus/>";
var cell5 = cell4.previousElementSibling;
//修改單元格內(nèi)容
cell5.innerHTML = "<input type='text' value='"+cell5.innerHTML+"' onblur='updateRowOver2(this)' autofocus/>";
}
//修改功能文本框失去焦點(diǎn)
function updateRowOver1(val){
//獲取單元格對(duì)象
var cell = val.parentNode;
//判斷文本框里面是否是數(shù)字
if(isNaN(val.value)){//true
alert("請(qǐng)輸入數(shù)字");
}else{
//實(shí)現(xiàn)保存
cell.innerHTML = val.value;
}
}
//修改功能文本框失去焦點(diǎn)
function updateRowOver2(val){
//獲取單元格對(duì)象
var cell = val.parentNode;
//判斷文本框里面是否是數(shù)字
if(null==val.value&&""==val.value){//true
alert("請(qǐng)輸入內(nèi)容");
}else{
//實(shí)現(xiàn)保存
cell.innerHTML = val.value;
}
}
//將修改保存進(jìn)數(shù)據(jù)庫(kù)
function upadteDb(btn){
var bookId;
var bookName;
var bookInfo;
var bookTotal;
var bookNum;
//獲取單元格對(duì)象
var cell1 = btn.parentNode.previousElementSibling;
//判斷cell.innerHTML的內(nèi)容是不是數(shù)字
if(!isNaN(cell1.innerHTML)){
bookNum=cell1.innerHTML;
}else{
updateRowOver1(cell1.firstElementChild);
bookNum=cell1.innerHTML;
}
var cell2 = cell1.previousElementSibling;
if(!isNaN(cell2.innerHTML)){
bookNum=cell2.innerHTML;
}else{
updateRowOver1(cell2.firstElementChild);
bookNum=cell2.innerHTML;
}
var cell3 = cell2.previousElementSibling;
if(!isNaN(cell3.innerHTML)){
bookTotal=cell3.innerHTML;
}else{
updateRowOver1(cell3.firstElementChild);
bookTotal=cell3.innerHTML;
}
var cell4 = cell3.previousElementSibling;
if(cell4.firstElementChild==null){
bookInfo=cell4.innerHTML;
}else{
updateRowOver2(cell4.firstElementChild);
bookInfo=cell4.innerHTML;
}
var cell5 = cell4.previousElementSibling;
if(cell5.firstElementChild==null){
bookName=cell5.innerHTML;
}else{
updateRowOver2(cell5.firstElementChild);
bookName=cell5.innerHTML;
}
var cell6 = cell5.previousElementSibling;
if(cell6.firstElementChild==null){
bookId=cell6.innerHTML;
}else{
updateRowOver2(cell6.firstElementChild);
bookId=cell6.innerHTML;
}
console.log(bookId+bookName+bookInfo+bookTotal+bookNum);
//獲取ajx對(duì)象
var xhr=new XMLHttpRequest();
//確定參數(shù)
var url="http://"+ip+"/updateBook";
xhr.open('post', url, true)
//發(fā)送請(qǐng)求
var string="&bookId="+bookId;
string+="&bookName="+bookName;
string+="&bookInfo="+bookInfo;
string+="&bookTotal="+bookTotal;
string+="&bookNum="+bookNum;
xhr.send(str+string);
//響應(yīng)處理
xhr.onload=function(){
var result=xhr.response;
if(xhr.status=="200"){
if("updateOk"==result){
alert("修改成功！??！");
}else if("updateFalse"==result) {
alert("修改失敗");
}
}else{
document.getElementsByClassName('body').value=result;
document.write(result);
}
}
}
//全選
function choseAll(){
var checkAll = document.getElementById('checkAll');
var check = document.getElementsByName('check');
if(checkAll.checked == true){
for(var i=0; i<check.length; i++){
var checka = check[i];
checka.checked = true;
}
}else{
for(var i=0; i<check.length; i++){
var checka = check[i];
checka.checked = false;
}
}
}
//隔行變色
function operCss(){
//獲取所有行數(shù)
var trs = document.getElementById('tab').rows;
//遍歷
for(var i=0; i<trs.length; i++){
if(i%2 == 0){
trs[i].style.backgroundColor = "rgba(255, 185, 19,0.9)";
}
}
}
window.onload=operCss();
</script>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
