<!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>
效果图: