Web课外练习8

没啥实力

已于 2024-05-22 08:24:33 修改

阅读量241

点赞数 3

文章标签：前端 css javascript

于 2024-05-19 13:58:51 首次发布

本文链接：https://blog.csdn.net/weixin_74021012/article/details/139041945

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: auto;
            display: flex;
        }
        .title{
            text-align: center;
            margin-top: 15px;
            font-size: xx-large;
            font-weight: bolder;
        }
        .btn{
            text-align: center;
            margin-top: 30px;
        }
        .anniu1{
            background-color: #017AFF;
            border: hidden;
            border-radius: 4px;
            cursor: pointer;
            color: white;
            font-size:medium;
            width: 110px;
            height: 40px;
        }
        .anniu1:hover{
            background-color: rgb(0, 0, 139);
        }
        .web{
            margin: auto;
            margin-top: 70px;
            border: 1px solid black hidden;
            border-radius: 2px;
            box-shadow: 0px 10px 30px rgb(0, 0,0.5);
            width: 600px;
            height: 400px;
            background-color:#F5F4F9;
        }
        .searchinput {
            margin-right: 10px;
            width: 260px;
            height: 32px;
        }
        .searchbtn {
            background-color: #017AFF;
            border: hidden;
            border-radius: 4px;
            cursor: pointer;
            color: white;
            font-size: medium;
            width: 80px;
            height: 40px;
        }
        .searchbtn:hover {
            background-color: rgb(0, 0, 139);
        }
        .tablecon {
            margin-top: 20px;
        }
        table {
            width: 90%;
            border-collapse: collapse;
            margin: auto;
            border: 1px solid rgb(20, 19, 19); 
        }
        th, td {
            border: 1px solid rgb(20, 20, 20);
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #F5F4F9;
        }
    </style>
</head>
<body>
    <div class="web">
        <div class="title">图书查询系统</div>
        <div class="btn">
            <button type="button" class="anniu1" id="databtn">读取数据</button>
        </div>
        <div class="tablecon" style="display: none;">
            <table>
                    <tr>
                        <th>序号</th>
                        <th>书名</th>
                        <th>作者</th>
                    </tr>
                <tbody id="booktable">

                </tbody>
            </table>
        </div>
    </div>
    <script>
        var booksdata = [
            {
                "id": 1,
                "title": "算法艺术与信息学竞赛",
                "author": "刘汝佳"
            },
            {
                "id": 2,
                "title": "Java语言程序设计",
                "author": "朗波"
            },
            {
                "id": 3,
                "title": "C++ Primer Plus",
                "author": "侯捷"
            },
            {
                "id": 4,
                "title": "Python核心编程",
                "author": "张颖"
            },
            {
                "id": 5,
                "title": "数据结构与算法分析：C语言描述",
                "author": "裘宗燕"
            }
        ];
        document.getElementById('databtn').addEventListener('click', function() {
            databtn.style.display = 'none';
            var tbox = document.createElement('input');
            tbox.type = 'text';
            tbox.className = 'searchinput';
            tbox.placeholder = '搜索书名...';
            var searchbtn = document.createElement('button');
            searchbtn.className = 'searchbtn';
            searchbtn.textContent = '搜索';
            searchbtn.addEventListener('click', function() { 
        var keyword = tbox.value.toLowerCase();
        searchBooks(keyword);
        addDate(webdata);
    });

    var btncon = document.querySelector('.btn');
    btncon.appendChild(tbox);
    btncon.appendChild(searchbtn);

    var tablecon = document.querySelector('.tablecon');
    tablecon.style.display = 'block';
    addDate(booksdata);
    });
        function addDate(data) {
        var tablebody = document.getElementById('booktable');
        tablebody.innerHTML = '';
        for (var i = 0; i < data.length; i++) {
        var book = data[i]; 
        var row = tablebody.insertRow(); 
        var bookindex = row.insertCell(0); 
        var booktitle = row.insertCell(1); 
        var bookauthor = row.insertCell(2); 
        bookindex.textContent = i + 1; 
        booktitle.textContent = book.title;
        bookauthor.textContent = book.author; 
        }
    }
    var webdata = booksdata;
    function searchBooks(keyword) {
        webdata = booksdata.filter(function(book) {
            return book.title.toLowerCase().indexOf(keyword) !== -1;
        });
    }
    </script>
</body>
</html>

fetch：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: auto;
            display: flex;
        }
        .title{
            text-align: center;
            margin-top: 15px;
            font-size: xx-large;
            font-weight: bolder;
        }
        .btn{
            text-align: center;
            margin-top: 30px;
        }
        .anniu1{
            background-color: #017AFF;
            border: hidden;
            border-radius: 4px;
            cursor: pointer;
            color: white;
            font-size:medium;
            width: 110px;
            height: 40px;
        }
        .anniu1:hover{
            background-color: rgb(0, 0, 139);
        }
        .web{
            margin: auto;
            margin-top: 70px;
            border: 1px solid black hidden;
            border-radius: 2px;
            box-shadow: 0px 10px 30px rgb(0, 0,0.5);
            width: 600px;
            height: 400px;
            background-color:#F5F4F9;
        }
        .searchinput {
            margin-right: 10px;
            width: 260px;
            height: 32px;
        }
        .searchbtn {
            background-color: #017AFF;
            border: hidden;
            border-radius: 4px;
            cursor: pointer;
            color: white;
            font-size: medium;
            width: 80px;
            height: 40px;
        }
        .searchbtn:hover {
            background-color: rgb(0, 0, 139);
        }
        .tablecon {
            margin-top: 20px;
        }
        table {
            width: 90%;
            border-collapse: collapse;
            margin: auto;
            border: 1px solid rgb(20, 19, 19); 
        }
        th, td {
            border: 1px solid rgb(20, 20, 20);
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #F5F4F9;
        }
    </style>
</head>
<body>
    <div class="web">
        <div class="title">图书查询系统</div>
        <div class="btn">
            <button type="button" class="anniu1" id="databtn">读取数据</button>
        </div>
        <div class="tablecon" style="display: none;">
            <table>
                    <tr>
                        <th>序号</th>
                        <th>书名</th>
                        <th>作者</th>
                    </tr>
                <tbody id="booktable">
 
                </tbody>
            </table>
        </div>
    </div>
    <script>
        var webdata = []; 
        fetch('books.json')
        .then(function(response) {
        return response.json();
        })
        .then(function(data){
        webdata = data;
        addDate(webdata);
        })   
        document.getElementById('databtn').addEventListener('click', function() {
            databtn.style.display = 'none';
            var tbox = document.createElement('input');
            tbox.type = 'text';
            tbox.className = 'searchinput';
            tbox.placeholder = '搜索书名...';
            var searchbtn = document.createElement('button');
            searchbtn.className = 'searchbtn';
            searchbtn.textContent = '搜索';
            searchbtn.addEventListener('click', function() {
                var keyword = tbox.value.toLowerCase();
                searchBooks(keyword);
                addDate(webdata);
            });
            var btnContainer = document.querySelector('.btn');
            btnContainer.appendChild(tbox);
            btnContainer.appendChild(searchbtn);
            var tableContainer = document.querySelector('.tablecon');
            tableContainer.style.display = 'block';
            addDate(webdata);
        });
    
        function addDate(data) {
            var tableBody = document.getElementById('booktable');
            tableBody.innerHTML = ''; 
            data.forEach(function(book, index) {
                var row = tableBody.insertRow();
                var bookindex = row.insertCell(0);
                var booktitle = row.insertCell(1);
                var bookauthor = row.insertCell(2);
                bookindex.textContent = index + 1;
                booktitle.textContent = book.title;
                bookauthor.textContent = book.author;
            });
        }
        function searchBooks(keyword) {
            webdata = webdata.filter(function(book) {
                return book.title.toLowerCase().indexOf(keyword) !== -1;
            });
        }
    </script>
</body>
</html>

效果图：