利用DOM实现图书馆管理系统

来源：互联网发布：杭州java培训班包住编辑：程序博客网时间：2024/05/16 16:11
在DOM中最小的组成部分是节点，在HTML中元素、文本、属性等都是节点，DOM能够获得页面节点，并能动态地进行获取操作。所以利用DOM实现动态操作页面，模拟图书馆管理系统：
代码如下：
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>图书馆管理系统DOM改写</title>    <style type="text/css">        .inputMsg{            width: 1100px;            height: 100px;            text-align: center;            margin: 0 auto;            padding: 20px;        }        .inputMsg input[type=button]{            margin: 20px;        }        .showMsg{            width: 800px;            min-height: 200px;            margin: 0 auto;        }        .showMsg table{            width:100%;            text-align: center;        }    </style></head><body>    <div class="inputMsg">        书籍名称：<input type="text" id="bookName" placeholder="请输入书籍名称"/>        书籍作者：<input type="text" id="bookAuthor" placeholder="请输入书籍作者"/>        书籍价格：<input type="text" id="bookPrice" placeholder="请输入数字"/>        书籍数量：<input type="text" id="bookNum" placeholder="请输入数字"/>        <input type="button" value="添加书籍信息" onclick="addDate()"/>        <input type="button" value="删除书籍信息" onclick="deleteMsg()"/>        <input type="button" value="修改书籍信息" onclick="updateMsg()"/>        <input type="button" value="查询书籍信息" onclick="queryMsg()"/>    </div>    <hr/>    <div class="showMsg">    </div>    <script>        function book(bookArr,bookname,bookauthor,bookprice,booknum){            var bookInfo = {};            bookInfo.bookName = bookname;            bookInfo.bookAuthor = bookauthor;            bookInfo.bookPrice = bookprice;            bookInfo.bookNum = booknum;            return bookArr.push(bookInfo);        }        var inputName=document.getElementById('bookName');        var inputAuthor=document.getElementById('bookAuthor');        var inputPrice=document.getElementById('bookPrice');        var inputNum=document.getElementById('bookNum');        var bookArr=[            {bookName:'js从入门到精通',bookAuthor:'crystal',bookPrice:58.9,bookNum:100},            {bookName:'java从入门到精通',bookAuthor:'crystal',bookPrice:68.9,bookNum:60}        ];        function addDate(){            var flag=true;            var bookName=inputName.value;            var bookAuthor=inputAuthor.value;            if(bookAuthor==''||bookName==''||inputPrice.value==''||inputNum.value==''){                alert('内容不能为空！');            }else{                if(isNaN(inputPrice.value)||isNaN(inputNum.value)){                    alert('请正确填写书籍价格、书籍数量！');                }else{                    var bookPrice=parseFloat(inputPrice.value);                    var bookNum=parseInt(inputNum.value);                    for(var i=0;i<bookArr.length;i++){                        if(bookArr[i].bookName.indexOf(bookName)==-1) {                            flag=true;                        }else{                            flag=false;                            break;                        }                    }                    if(flag){                        var len=book(bookArr,bookName,bookAuthor,bookPrice,bookNum);                        alert('success!The bookNum is '+len);                    }else{                        alert('已存在此本书籍');                    }                }            }        }        function queryMsg(){            var titleArr=['书籍名称','书籍作者','书籍价格','书籍数量'];            var container=document.querySelector('.showMsg');            container.innerHTML='';            var table=document.createElement('table');            table.cellSpacing='0';            table.border='1px';            var titleTr=document.createElement('tr');            for(var x=0;x<titleArr.length;x++){                var th=document.createElement('th');                th.innerHTML=titleArr[x];                titleTr.appendChild(th);            }            table.appendChild(titleTr);            for(var index=0;index<bookArr.length;index++){                var tr=document.createElement('tr');                for(var i=0;i<Object.keys(bookArr[index]).length;i++){                    var td=document.createElement('td');                    td.innerHTML=bookArr[index][Object.keys(bookArr[index])[i]];                    tr.appendChild(td);                }                table.appendChild(tr);            }            container.appendChild(table);        }       function deleteMsg(){           var container=document.querySelector('.showMsg');           var bookName=inputName.value;           var flag=true;           var aimIndex=0;           if(bookName==''){               alert('根据书籍名称查找删除，所以书籍名称不能为空');           }else{//               删除页面元素//               for(var index=1;index<container.firstChild.childNodes.length;index++){//                   console.log(container.firstChild.childNodes[index].childNodes[0].innerHTML);//                   if(bookName==container.firstChild.childNodes[index].childNodes[0].innerHTML){//                       flag=true;//                       container.firstChild.removeChild(container.firstChild.childNodes[index]);//                       break;//                   }else{//                       flag=false;//                   }//               }               for(var i=0;i<bookArr.length;i++){                   if(bookName==container.firstChild.childNodes[i+1].childNodes[0].innerHTML){                       flag=true;                       aimIndex=i;                       container.firstChild.removeChild(container.firstChild.childNodes[i+1]);                       break;                   }else{                       flag=false;                   }               }               if(flag){                   bookArr.splice(aimIndex, 1);                   alert('删除成功，请查询');               }else{                   alert('不存在此本书籍！');               }           }       }        function updateMsg(){            var container=document.querySelector('.showMsg');            var bookName=inputName.value;            var bookPrice=inputPrice.value;            var bookNum=inputNum.value;            var flag=true;            if(bookName==''||bookPrice==''||bookNum==''){                alert('信息不能为空');            }else if(isNaN(bookPrice)||isNaN(bookNum)){                alert('请正确填写价格和数目');            }else{                for(var i=0;i<bookArr.length;i++){                    if(bookName==container.firstChild.childNodes[i+1].childNodes[0].innerHTML){                        bookArr[i].bookNum=parseInt(bookNum);                        bookArr[i].bookPrice=parseFloat(bookPrice);                        container.firstChild.childNodes[i+1].childNodes[2].innerHTML=bookPrice;                        container.firstChild.childNodes[i+1].childNodes[3].innerHTML=bookNum;                        flag=true;                        break;                    }else{                        flag=false;                    }                }                if(flag){                    alert('修改成功');                }else{                    alert('不存在此书籍');                }            }        }    </script></body></html>
阅读全文
0 0