用js写一个图书管理系统
时间: 2024-03-25 21:36:06 浏览: 18
好的,以下是用 JavaScript 写一个简单的图书管理系统的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图书管理系统</title>
</head>
<body>
<h1>图书管理系统</h1>
<table>
<tr>
<th>序号</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
</tr>
<tbody id="bookList"></tbody>
</table>
<br>
<form>
<label>书名:</label>
<input type="text" id="name">
<label>作者:</label>
<input type="text" id="author">
<label>出版社:</label>
<input type="text" id="publisher">
<button type="button" onclick="addBook()">添加图书</button>
</form>
<script>
// 定义图书列表数组
let bookList = [];
// 定义添加图书函数
function addBook() {
// 获取表单中的数据
let name = document.getElementById("name").value;
let author = document.getElementById("author").value;
let publisher = document.getElementById("publisher").value;
// 创建图书对象
let book = {
name: name,
author: author,
publisher: publisher
};
// 添加图书对象到数组中
bookList.push(book);
// 清空表单
document.getElementById("name").value = "";
document.getElementById("author").value = "";
document.getElementById("publisher").value = "";
// 更新图书列表
renderBookList();
}
// 定义渲染图书列表函数
function renderBookList() {
let bookListElem = document.getElementById("bookList");
let html = "";
for (let i = 0; i < bookList.length; i++) {
let book = bookList[i];
html += "<tr>";
html += "<td>" + (i + 1) + "</td>";
html += "<td>" + book.name + "</td>";
html += "<td>" + book.author + "</td>";
html += "<td>" + book.publisher + "</td>";
html += "</tr>";
}
bookListElem.innerHTML = html;
}
// 页面加载时渲染图书列表
document.addEventListener("DOMContentLoaded", function(event) {
renderBookList();
});
</script>
</body>
</html>
```
上述代码中,我们通过 HTML 和 JavaScript 实现了一个简单的图书管理系统。其中,我们使用一个数组 `bookList` 存储所有的图书对象,使用一个表格展示图书列表,使用一个表单添加新的图书。具体实现如下:
1. 使用 HTML 定义了一个表格,其中包含一个表头和一个空的表体。同时,我们为表单中的输入框和按钮设置了 id 和 onclick 属性,以便在 JavaScript 中进行操作。
2. 在 JavaScript 中定义了一个数组 `bookList`,用于存储所有的图书对象。同时,我们定义了两个函数 `addBook` 和 `renderBookList`。
3. `addBook` 函数用于添加新的图书。首先,我们获取表单中的数据,然后创建一个新的图书对象,将其添加到 `bookList` 数组中。最后,我们清空表单,并调用 `renderBookList` 函数更新图书列表。
4. `renderBookList` 函数用于渲染图书列表。我们首先获取表体元素,然后遍历 `bookList` 数组,为每个图书对象创建一个表格行,并将其添加到表体中。最后,我们将表格行的 HTML 代码拼接起来,并将其赋值给表体的 innerHTML 属性。
5. 在页面加载时,我们调用 `renderBookList` 函数,以便初始化图书列表。
这样,我们就完成了一个简单的图书管理系统的开发。当然,这只是一个非常简单的例子,实际上一个完整的图书管理系统包含的功能远不止这些。如果你有兴趣,可以进一步扩展这个例子,添加更多的功能。