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

...lemon_...

已于 2023-10-30 16:00:25 修改

阅读量958

点赞数

分类专栏： frontEnd 文章标签：前端 javascript html

于 2017-09-18 22:26:57 首次发布

本文链接：https://blog.csdn.net/qianqianningmeng/article/details/78024615

版权

frontEnd 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

在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>