图书管理添加（部分）

最新推荐文章于 2023-10-10 11:24:22 发布

l123zmj

最新推荐文章于 2023-10-10 11:24:22 发布

阅读量312

点赞数

文章标签：添加图书

本文链接：https://blog.csdn.net/l123zmj/article/details/100704504

版权

数据的获取

1.以二维数组来显示的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理的练习</title>
    <style>
    .head{
        text-align: center;
    }
        .bottom{
            text-align: center;
            margin-top: 15px;
        }
        .user{
            text-align: center;
        }
   .table{
       margin-top: 20px;
       text-align: center;
   }
    </style>
</head>
<body>
<div class="head">
    <h2><strong>图书管理系统</strong></h2>
</div>
<div class="user">
        书名 <input type="text" id="username"/>
        作者<input type="text" id="userAuthor"/>
        价格 <input type="text" id="bookprice"/>
        数量<input type="text" id="booknumber"/>
    <br/>
    <button class="bottom" id="add">添加</button>
    <button class="bottom" id="query">查询</button>
</div>
<div id="showmassage">
<script>
    //1.获取页面信息
    var  usernameInput = document.getElementById('username');
    var  userAuthorInput = document.getElementById('userAuthor');
    var  bookpriceInput = document.getElementById('bookprice');
    var  booknumberInput = document.getElementById('booknumber');
    var  addbtn = document.getElementById('add');
    var  querybtn = document.getElementById('query');
    var  showmassagput = document.getElementById('showmassage');

    //2.准备二维数组

    var BookArray = [];

    //3.给button添加点击事件
    //3.1添加按钮
    addbtn.onclick = function () {
        //3.10获取元素信息
        var username =  usernameInput.value;
        var userAuthor = userAuthorInput.value;
        var bookprice = bookpriceInput.value;
        var booknumber = booknumberInput.value;

        //3.11 对元素内容进行判断
        //3.111内容不完整
        if(username.trim().length==0 ||userAuthor.trim().length==0||bookprice.trim().length==0 || booknumber.trim().length==0)
        {
            alert("信息不完整，请把信息补充完整！！!");
        }
        //3.112 内容完整  把内容添加进去
        else{
            var arr = [];
            arr.push(username);
            arr.push(userAuthor);
            arr.push(bookprice);
            arr.push(booknumber);
            BookArray.push(arr);
        }
        //3.14清除数据
        usernameInput.value='';
        userAuthorInput.value ='';
        bookpriceInput.value = '';
        booknumberInput.value = '';
    }

    //3.2 显示按钮
    querybtn.onclick = function () {
        //判断二维数组是否有数据
        if (BookArray.length == 0) {
            alert("请添加数据！！！");
        } else {
            var str = '<table border="1" width="700px" cellspacing="0" align="center" class="table">' +
                '<tr><td>书名</td><td>作者</td><td>价格</td><td>数量</td></tr>';
            for (var i = 0; i < BookArray.length; i++) {
                str += '<tr>' +
                    '<td>'+BookArray[i][0]+'</td>' +
                    '<td>'+BookArray[i][1]+'</td>' +
                    '<td>'+BookArray[i][2]+'</td>' +
                    '<td>'+BookArray[i][3]+'</td>' +
                    '</tr>';
            }
            str += '</table>';
            showmassagput.innerHTML = str;
        }
    }
</script>
</div>
<script>
</script>
</body>
</html>

页面显示：
在这里插入图片描述
2.运用对象来写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>改进图书管理系统</title>
<!--    当添加时就显示结果-->
    <style>
        .head{
            text-align: center;
        }
        .bottom{
            text-align: center;
            margin-top: 15px;
        }
        .user{
            text-align: center;
        }
        .table{
            margin-top: 20px;
            text-align: center;
        }
    </style>
</head>
<body>

<div class="head">
    <h2><strong>图书管理系统</strong></h2>
</div>
<div class="user">
    书名 <input type="text" id="username"/>
    作者<input type="text" id="userAuthor"/>
    价格 <input type="text" id="bookprice"/>
    数量<input type="text" id="booknumber"/>
    <br/>
    <button class="bottom" id="add">添加</button>
    <button class="bottom" id="query">查询</button>
</div>
<div id="showmassage">
    <script>
        //1.获取页面信息
        var  usernameInput = document.getElementById('username');
        var  userAuthorInput = document.getElementById('userAuthor');
        var  bookpriceInput = document.getElementById('bookprice');
        var  booknumberInput = document.getElementById('booknumber');
        var  addbtn = document.getElementById('add');
        var  querybtn = document.getElementById('query');
        var  showmassagput = document.getElementById('showmassage');

        //2.准备一维数组

        var BookArray = [];

        //3.给button添加点击事件
        //3.1添加按钮
        addbtn.onclick = function () {
            //3.10获取元素信息
            var username =  usernameInput.value;
            var userAuthor = userAuthorInput.value;
            var bookprice = bookpriceInput.value;
            var booknumber = booknumberInput.value;

            //3.11 对元素内容进行判断
            //3.111内容不完整
            if(username.trim().length==0 ||userAuthor.trim().length==0||bookprice.trim().length==0 || booknumber.trim().length==0)
            {
                alert("信息不完整，请把信息补充完整！！!");
            }
            //3.112 内容完整  把内容添加进去
            else{
                var obj = {};
                obj.username = username;
                obj.userAuthor = userAuthor;
                obj.bookprice = bookprice;
                obj.booknumber = booknumber;
                BookArray.push(obj);
                show();
            }
            //3.14清除数据
            usernameInput.value='';
            userAuthorInput.value ='';
            bookpriceInput.value = '';
            booknumberInput.value = '';
        }

        //3.2 显示按钮
        querybtn.onclick = function () {
            //判断二维数组是否有数据
          show();
        }
        function show() {
            if (BookArray.length == 0) {
                alert("请添加数据！！！");
            } else {
                var str = '<table border="1" width="700px" cellspacing="0" align="center" class="table">' +
                    '<tr><td>书名</td><td>作者</td><td>价格</td><td>数量</td></tr>';
                for (var i = 0; i < BookArray.length; i++) {
                    str += '<tr>' +
                        '<td>' + BookArray[i].username + '</td>' +
                        '<td>' + BookArray[i].userAuthor + '</td>' +
                        '<td>' + BookArray[i].bookprice + '</td>' +
                        '<td>' + BookArray[i].booknumber + '</td>' +
                        '</tr>';
                }
                str += '</table>';
                showmassagput.innerHTML = str;
            }
        }
    </script>
</div>

</body>
</html>

l123zmj

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
图书管理添加（部分）

数据的获取<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图书管理的练习</title> <style> .head{ text-align: center; } ...
复制链接

扫一扫