美文网首页
2019-08-25

2019-08-25

作者: 勿陌 | 来源:发表于2019-08-25 21:25 被阅读0次

前端 管理员界面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>

相关文章

  • Lan的ScalersTalk第四轮新概念朗读持续力训练Day

    练习材料: [Day 1794 2019-08-25] Lesson 36-2 The cost of gover...

  • 8月25日

    2019-08-25 毛雅亭 字数 572 · 阅读 17 2019-06-02 18:39 ...

  • DALS025-批次效应01-什么是批次效应

    title: DALS025-批次效应01-什么是批次效应date: 2019-08-25 12:0:00type...

  • 文先森的日常 -- 失误

    日精进打卡第389天 姓名:李文杰 (四爷); 公司:中国太平人寿; 日期:2019-08-25 【知~学习】 《...

  • 秋雨

    文/鲁以薇 处暑后三日, 秋雨如约来。 凉风爽人意, 秋词何赋愁? 2019-08-25

  • 学习思考:现今社会赚钱思路

    作者链接:学习思考:现今社会赚钱思路 作者:简自强 2019-08-25 23:42 看过很多短文视频,也听了很多...

  • 2019-08-26

    2019-08-25 亮剑_f5b9 字数 409 · 阅读 22 2019-08-25.22:10 亮剑_f5b...

  • 陪我吵架😋

    2019-08-25 心情不好, 易燃易爆。 我想吵架, 陪我吵架, 顺着我, 哄着我, 宠着我。 深更半夜, 困...

  • 山花

    ——谨以此诗悼念吴治录老师 点点缀遐苍,经冬复历霜。 无心占春色,着意肆芬芳。 2019-08-25

  • 2019-08-25间歇跑4

    时间:2019-08-25 06:30 线路:天马河绿道 成绩:间歇跑800米*6用时近60分 感受:早上起来,也...

网友评论

      本文标题:2019-08-25

      本文链接:https://www.haomeiwen.com/subject/aewkectx.html