前端 管理员界面html和js
<html>
<head>
<title>图书管理系统</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>图书管理系统</h3>
<hr/>
<h4>添加图书</h4>
<table class="tab">
<tr>
<td>书籍id:</td>
<td><input type="text" id="bookId" name=""></td>
<td>书籍名称:</td>
<td><input type="text" id="bookName" name=""></td>
</tr>
<tr>
<td>书籍信息:</td>
<td><input type="text" id="bookInfo" name=""></td>
<td>书籍总数量:</td>
<td><input type="text" id="bookTotal" name=""></td>
</tr>
<tr>
<td>按名字查询书籍:</td>
<td><input type="text" id="searchById" ></td>
<td>按id查询书籍:</td>
<td><input type="text" id="searchByName" ></td>
</tr>
<tr>
<td><input type="button" value="添加书籍" onclick="addBook()" ></td>
<td><input type="button" value="查询书籍" name="" onclick="searchBook()" ></td>
<td><input type="button" value="删除选中行" name="" onclick="choseDel()" ></td>
<td><input type="button" value="修改密码" onclick="changePwd()" ></td>
</tr>
</table>
<h3>图书查询</h3>
<hr/>
<table border="1" class="tab" id="tab">
<tr id="t1">
<td><input type="checkbox" id="checkAll" onclick="choseAll()"></td>
<td>书籍id</td>
<td>书籍名称</td>
<td>书籍信息:</td>
<td>书籍总数</td>
<td>书籍已借出</td>
<td>书籍剩余量</td>
<td>操作</td>
</tr>
</table>
<script type="text/javascript">
var ip="192.168.43.241:8888";
var split = "|^|";
var split2 = "|$|";
//获取本地账号密码
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");
}
//添加书籍
function addBook(){
//获取要添加的数据
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();
//判断数据是否为空
if(bookId == "" || bookId == null){
alert("书籍编号不能为空");
return;
}
if(bookName == "" || bookName == null){
alert("书籍名不能为空");
return;
}
if(bookInfo == "" || bookInfo == null){
alert("书籍描述不能为空");
return;
}
if(bookTotal == "" || bookTotal == null){
alert("书籍总数量不能为空");
return;
}
//1.创建ajax对象
var xhr = new XMLHttpRequest();
//2.确定参数（请求方法，请求地址，是否异步）
var string='&bookId='+bookId;
string+='&bookName='+bookName;
string+='&bookInfo='+bookInfo;
string+='&bookTotal='+bookTotal;
var url="http://"+ip+"/addBook";
xhr.open('post',url,true);
//3.发送请求
xhr.send(str+string);
xhr.responseType = 'Text';
//处理返回结果
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重复");
}
}else{
document.getElementsByClassName('body').value=result;
document.write(result);
}
}
}
//查询书籍
function searchBook(){
//获取要查询的数据
var bookId = document.getElementById('searchById').value.trim();
var bookName = document.getElementById('searchByName').value.trim();
//判断数据是否为空
if((bookId == "" || bookId == null)&&(bookName == "" || bookName == null)){
alert("书籍id,或者书籍名字填且仅填其中一个，其中书籍名字查询支持模糊查询");
return;
}else if((bookId != "" && bookId != null)&&(bookName != "" && bookName != null)){
alert("书籍id,或者书籍名字只能填其中一个");
return;
}
//查询方式
var flag=false;
if("" != bookName && null != bookName){
var flag=false;
}else if("" != bookId && null != bookId){
var flag=true;
}
//1.创建ajax对象
var xhr = new XMLHttpRequest();
//2.确定参数（请求方法，请求地址，是否异步）
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.发送请求
xhr.send(str+string);
xhr.responseType = 'Text';
//处理返回结果
xhr.onload = function(){
var result=xhr.response;
console.log(result.trim());
if(xhr.status=="200"){
if("nobook"==result){
alert("没有结果!!!");
}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);
}
}
}
//去除数组中空字符串
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对象
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(){
//获取到表格对象
var tab = document.getElementById('tab');
//获取所有的name为check的复选框
var check = document.getElementsByName('check');
for(var i=0; i<check.length; i++){
tab.deleteRow(i+1);
i--;
}
}
//删除选中行
function choseDel(){
//获取到表格对象
var tab = document.getElementById('tab');
//获取所有的name为check的复选框
var check = document.getElementsByName('check');
var array=new Array();
for(var i=0; i<check.length; i++){
//判断哪些是选中的单选框
if(check[i].checked == true){
//获取单元格对象
var myNode=check[i].parentNode;
var bookIdParent = myNode.nextElementSibling;
var bookId=bookIdParent.innerHTML;
array[array.length]=bookId;
}
}
console.log(array);
sendDeletToServer(array);
}
//发送要删除书籍ID到服务器
function sendDeletToServer(array){
var booksId="";
for(var i=0;i<array.length;i++){
booksId+=array[i]+split;
}
//1.创建ajax对象
var xhr = new XMLHttpRequest();
//2.确定参数（请求方法，请求地址，是否异步）
var url="http://"+ip+"/deleteBooks";
xhr.open('post',url,true);
//3.发送请求
var string="&booksId="+booksId;
xhr.send(str+string);
xhr.responseType = 'Text';
//处理返回结果
xhr.onload = function(){
var result=xhr.response;
console.log(xhr.status)
if(xhr.status=="200"){
if("deleteOk"==result){
alert("删除成功!!!");
//获取到表格对象
var tab = document.getElementById('tab');
//获取所有的name为check的复选框
var check = document.getElementsByName('check');
for(var i=0; i<check.length; i++){
//判断哪些是选中的复选框
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){
//获取单元格对象
var cell1 = btn.parentNode.previousElementSibling;
//判断cell.innerHTML的内容是不是数字
if(!isNaN(cell1.innerHTML)){
//修改单元格内容
cell1.innerHTML = "<input type='text' value='"+cell1.innerHTML+"' onblur='updateRowOver1(this)' autofocus/>";
}
var cell2 = cell1.previousElementSibling;
//判断cell.innerHTML的内容是不是数字
if(!isNaN(cell2.innerHTML)){
//修改单元格内容
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;
//修改单元格内容
cell4.innerHTML = "<input type='text' value='"+cell4.innerHTML+"' onblur='updateRowOver2(this)' autofocus/>";
var cell5 = cell4.previousElementSibling;
//修改单元格内容
cell5.innerHTML = "<input type='text' value='"+cell5.innerHTML+"' onblur='updateRowOver2(this)' autofocus/>";
}
//修改功能文本框失去焦点
function updateRowOver1(val){
//获取单元格对象
var cell = val.parentNode;
//判断文本框里面是否是数字
if(isNaN(val.value)){//true
alert("请输入数字");
}else{
//实现保存
cell.innerHTML = val.value;
}
}
//修改功能文本框失去焦点
function updateRowOver2(val){
//获取单元格对象
var cell = val.parentNode;
//判断文本框里面是否是数字
if(null==val.value&&""==val.value){//true
alert("请输入内容");
}else{
//实现保存
cell.innerHTML = val.value;
}
}
//将修改保存进数据库
function upadteDb(btn){
var bookId;
var bookName;
var bookInfo;
var bookTotal;
var bookNum;
//获取单元格对象
var cell1 = btn.parentNode.previousElementSibling;
//判断cell.innerHTML的内容是不是数字
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对象
var xhr=new XMLHttpRequest();
//确定参数
var url="http://"+ip+"/updateBook";
xhr.open('post', url, true)
//发送请求
var string="&bookId="+bookId;
string+="&bookName="+bookName;
string+="&bookInfo="+bookInfo;
string+="&bookTotal="+bookTotal;
string+="&bookNum="+bookNum;
xhr.send(str+string);
//响应处理
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(){
//获取所有行数
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>
网友评论