2019-08-25

前端 管理员界面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>
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,639评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,277评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,221评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,474评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,570评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,816评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,957评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,718评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,176评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,511评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,646评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,322评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,934评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,755评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,987评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,358评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,514评论 2 348

推荐阅读更多精彩内容