今天是第十六天我們可以寫一個javascript線上圖書館網頁程式管理系統，以下是我的程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Library Management System</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
padding: 20px;
}
h1 {
color: #333;
}
.book-list {
margin-top: 20px;
}
.book-list table {
width: 100%;
border-collapse: collapse;
}
.book-list table, .book-list th, .book-list td {
border: 1px solid #ddd;
}
.book-list th, .book-list td {
padding: 10px;
text-align: left;
}
.book-list th {
background-color: #f2f2f2;
}
.form-group {
margin-bottom: 15px;
}
label {
margin-right: 10px;
}
input[type="text"] {
padding: 5px;
width: 300px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>Online Library Management System</h1>
<div>
<h2>Add a New Book</h2>
<div class="form-group">
<label for="bookTitle">Title:</label>
<input type="text" id="bookTitle" placeholder="Enter book title">
</div>
<div class="form-group">
<label for="bookAuthor">Author:</label>
<input type="text" id="bookAuthor" placeholder="Enter book author">
</div>
<button onclick="addBook()">Add Book</button>
</div>
<div class="book-list">
<h2>Book List</h2>
<table>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Action</th>
</tr>
</thead>
<tbody id="bookTableBody">
<!-- Book list will be appended here -->
</tbody>
</table>
</div>
<script>
let books = [];
function addBook() {
const title = document.getElementById('bookTitle').value;
const author = document.getElementById('bookAuthor').value;
if (title === '' || author === '') {
alert('Please fill in both fields.');
return;
}
const book = {
title: title,
author: author
};
books.push(book);
displayBooks();
document.getElementById('bookTitle').value = '';
document.getElementById('bookAuthor').value = '';
}
function displayBooks() {
const tableBody = document.getElementById('bookTableBody');
tableBody.innerHTML = ''; // Clear previous data
books.forEach((book, index) => {
const row = `
<tr>
<td>${book.title}</td>
<td>${book.author}</td>
<td><button onclick="removeBook(${index})">Delete</button></td>
</tr>
`;
tableBody.innerHTML += row;
});
}
function removeBook(index) {
books.splice(index, 1);
displayBooks();
}
</script>
</body>
</html>
我會以javascript作程式碼講解
let books = [];
這行宣告了一個空的陣列 books，用來儲存書籍資料。每次新增一本書時，會把書籍的標題和作者存入這個陣列中。這是一個全域變數，所以可以在其他函數中使用。
addBook() 函數function addBook() {
const title = document.getElementById('bookTitle').value;
const author = document.getElementById('bookAuthor').value;
if (title === '' || author === '') {
alert('Please fill in both fields.');
return;
}
const book = {
title: title,
author: author
};
books.push(book);
displayBooks();
document.getElementById('bookTitle').value = '';
document.getElementById('bookAuthor').value = '';
}
這個函數處理使用者新增書籍的操作，步驟如下：
取得輸入值：
document.getElementById('bookTitle').value 和 document.getElementById('bookAuthor').value 分別取得輸入框中的書名和作者名稱。檢查空白輸入：
title === '' || author === '')，會跳出一個提示視窗 alert('Please fill in both fields.')，要求使用者必須輸入這兩個欄位的資料，然後使用 return 終止函數執行。建立書籍物件：
book 中：
const book = {
title: title,
author: author
};
title 和 author。加入書籍到陣列：
books.push(book) 將書籍物件新增到 books 陣列中。顯示書籍：
displayBooks() 函數來更新並顯示書籍列表，確保新加入的書會顯示在表格中。清空輸入框：
document.getElementById('bookTitle').value = '';
document.getElementById('bookAuthor').value = '';
displayBooks() 函數function displayBooks() {
const tableBody = document.getElementById('bookTableBody');
tableBody.innerHTML = ''; // Clear previous data
books.forEach((book, index) => {
const row = `
<tr>
<td>${book.title}</td>
<td>${book.author}</td>
<td><button onclick="removeBook(${index})">Delete</button></td>
</tr>
`;
tableBody.innerHTML += row;
});
}
此函數負責將書籍列表顯示在表格中，步驟如下：
取得表格的 tbody：
document.getElementById('bookTableBody') 取得表格的 <tbody> 元素，這是要將書籍顯示的地方。清空表格內容：
tableBody.innerHTML = ''; 清空 tbody 內部的 HTML，避免重複顯示書籍資料。遍歷 books 陣列：
books.forEach() 方法遍歷每一本書。forEach() 會依次對 books 陣列中的每一個書籍物件進行操作。book 代表當前書籍，index 代表書籍在陣列中的索引。動態生成表格行：
${}，將每一本書的 title 和 author 放入表格中：
const row = `
<tr>
<td>${book.title}</td>
<td>${book.author}</td>
<td><button onclick="removeBook(${index})">Delete</button></td>
</tr>
`;
<tr> 行，並加入一個 "Delete" 按鈕，當按下此按鈕時會呼叫 removeBook() 函數並傳遞對應的 index 作為參數。將行加入表格：
tableBody.innerHTML += row; 將生成的每一行書籍資料新增到表格中，更新顯示。removeBook() 函數function removeBook(index) {
books.splice(index, 1);
displayBooks();
}
此函數負責刪除書籍，步驟如下：
從陣列中刪除書籍：
splice() 方法用來從 books 陣列中刪除指定的書籍。傳遞的參數 index 是書籍在陣列中的位置，1 代表刪除一個元素：
books.splice(index, 1);
更新書籍列表：
displayBooks() 函數，重新顯示刪除書籍後的書籍列表。books 陣列：用來儲存所有書籍的資料。addBook()：將使用者輸入的書名和作者新增到 books 陣列中，並更新顯示。displayBooks()：更新並顯示書籍列表，動態生成 HTML 表格。removeBook()：從 books 陣列中刪除指定書籍，並更新顯示。
iThome鐵人賽
看影片追技術