很简单！！！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.grid {
margin: auto;
width: 800px;
text-align: center;
}
.grid table {
width: 100%;
border-collapse: collapse;
}
.grid th,td {
padding: 10;
border: 1px dashed orange;
height: 35px;
line-height: 35px;
}
.grid th {
background-color: orange;
}
.grid .book {
padding-bottom: 10px;
padding-top: 5px;
background-color: #F3DCAB;
}
.grid .book div {
/* display: flex; */
}
.grid .book button {
float: right;
padding-right: 5px;
}
.grid .total {
height: 30px;
line-height: 30px;
background-color: #F3DCAB;
border-top: 1px solid #C2D89A;
}
.grid td span {
border: 1px solid orange;
cursor: pointer;
padding: 3px 8px;
border-radius: 3px;
}
</style>
</head>
<body>
<div id="app">
<div class="grid">
<div>
<h1>图书管理</h1>
<div class="book">
<div>
<label for="id">
编号：
</label>
<input type="text" id="id">
<label for="name">
名称：
</label>
<input type="text" id="name">
<label for="author">
作者：
</label>
<input type="text" id="author">
<button id="btn">提交</button>
</div>
</div>
</div>
<div class="total">
<span>图书总数：</span>
<span></span>
</div>
<table>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>作者</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</body>
<script type="text/javascript">
var book_list = [{id: 1,book_name:'三国演义', author: '罗贯中'}]
var btn = document.getElementById('btn')
setBody()
btn.onclick = function(){
var id = document.getElementById('id').value
var book_name = document.getElementById('name').value
var author = document.getElementById('author').value
//如果需要判断输入框为空的话，可以在这里写....
book_list.push({id: id,book_name:book_name, author: author})
setBody()
}
function setBody(){
var html = ''
book_list.forEach(item=>{
html+=`<tr><td>${item.id}</td><td>${item.book_name}</td><td>${item.author}</td></tr>`
})
var tbody = document.getElementsByTagName('tbody')[0]
tbody.innerHTML = html
}
</script>
</html>