今天是第十一天我們可以寫一個javascript股票網頁程式管理系統，以下是我的程式碼
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>股票管理系統</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>股票管理系統</h1>
<!-- 股票表格 -->
<table id="stockTable">
<thead>
<tr>
<th>股票名稱</th>
<th>數量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 股票列表會顯示在這裡 -->
</tbody>
</table>
<!-- 新增股票表單 -->
<h2>新增股票</h2>
<form id="addStockForm">
<input type="text" id="stockName" placeholder="股票名稱" required>
<input type="number" id="stockQuantity" placeholder="數量" required>
<button type="submit">新增</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.container {
width: 80%;
margin: 0 auto;
background-color: white;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1, h2 {
text-align: center;
}
table {
width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
}
table, th, td {
border: 1px solid #ddd;
}
th, td {
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
form {
display: flex;
justify-content: center;
gap: 10px;
}
input[type="text"], input[type="number"] {
padding: 8px;
width: 200px;
}
button {
padding: 8px 16px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
// 模擬的股票資料
let stocks = [];
// 獲取 DOM 元素
const stockTableBody = document.querySelector("#stockTable tbody");
const stockNameInput = document.getElementById("stockName");
const stockQuantityInput = document.getElementById("stockQuantity");
const addStockForm = document.getElementById("addStockForm");
// 顯示股票列表
function displayStocks() {
stockTableBody.innerHTML = ""; // 清空表格
stocks.forEach((stock, index) => {
const row = document.createElement("tr");
row.innerHTML = `
<td>${stock.name}</td>
<td>${stock.quantity}</td>
<td>
<button onclick="editStock(${index})">編輯</button>
<button onclick="deleteStock(${index})">刪除</button>
</td>
`;
stockTableBody.appendChild(row);
});
}
// 新增股票
addStockForm.addEventListener("submit", (event) => {
event.preventDefault(); // 防止表單提交刷新頁面
const stockName = stockNameInput.value;
const stockQuantity = parseInt(stockQuantityInput.value);
// 新增到股票列表
stocks.push({ name: stockName, quantity: stockQuantity });
// 清空表單
stockNameInput.value = "";
stockQuantityInput.value = "";
// 更新顯示
displayStocks();
});
// 刪除股票
function deleteStock(index) {
stocks.splice(index, 1);
displayStocks();
}
// 編輯股票
function editStock(index) {
const stock = stocks[index];
const newQuantity = prompt(`輸入新的數量 (${stock.name}):`, stock.quantity);
if (newQuantity !== null && !isNaN(newQuantity)) {
stocks[index].quantity = parseInt(newQuantity);
displayStocks();
}
}
// 初次載入顯示
displayStocks();
我會以javascript做程式的解說
let stocks = [];
這行定義了一個空的 stocks 陣列，用來儲存使用者新增的股票資料。每個股票會被表示為一個包含 name 和 quantity 的物件。
const stockTableBody = document.querySelector("#stockTable tbody");
const stockNameInput = document.getElementById("stockName");
const stockQuantityInput = document.getElementById("stockQuantity");
const addStockForm = document.getElementById("addStockForm");
這裡透過 document.querySelector 和 document.getElementById 來抓取 HTML 中的元素。這些變數分別代表：
stockTableBody: 股票列表表格的 <tbody> 元素，將用來顯示每一個股票條目。stockNameInput: 使用者輸入股票名稱的 <input> 元素。stockQuantityInput: 使用者輸入股票數量的 <input> 元素。addStockForm: 用來監聽表單提交事件的 <form> 元素。function displayStocks() {
stockTableBody.innerHTML = ""; // 清空表格
stocks.forEach((stock, index) => {
const row = document.createElement("tr");
row.innerHTML = `
<td>${stock.name}</td>
<td>${stock.quantity}</td>
<td>
<button onclick="editStock(${index})">編輯</button>
<button onclick="deleteStock(${index})">刪除</button>
</td>
`;
stockTableBody.appendChild(row);
});
}
這段程式用來顯示股票列表。每次有變動時，這個函式會先清空表格內容，然後遍歷 stocks 陣列，動態生成新的 <tr>（表格列），並插入股票名稱、數量和編輯、刪除按鈕。每個按鈕綁定了對應的函式 (editStock 和 deleteStock)，將會根據按鈕點擊時的 index 來進行操作。
addStockForm.addEventListener("submit", (event) => {
event.preventDefault(); // 防止表單提交刷新頁面
const stockName = stockNameInput.value;
const stockQuantity = parseInt(stockQuantityInput.value);
// 新增到股票列表
stocks.push({ name: stockName, quantity: stockQuantity });
// 清空表單
stockNameInput.value = "";
stockQuantityInput.value = "";
// 更新顯示
displayStocks();
});
這段程式監聽表單提交事件。當使用者提交表單時：
event.preventDefault() 阻止表單的預設行為（防止網頁刷新）。parseInt)。{ name: stockName, quantity: stockQuantity } 推入 stocks 陣列。displayStocks() 函式更新股票列表顯示。function deleteStock(index) {
stocks.splice(index, 1); // 刪除指定索引位置的股票
displayStocks(); // 刪除後重新顯示股票列表
}
這個函式會根據傳入的 index（即股票在陣列中的位置）來刪除股票。splice() 是用來從 stocks 陣列中刪除指定位置的元素。刪除之後，會再次呼叫 displayStocks() 更新畫面。
function editStock(index) {
const stock = stocks[index];
const newQuantity = prompt(`輸入新的數量 (${stock.name}):`, stock.quantity);
if (newQuantity !== null && !isNaN(newQuantity)) {
stocks[index].quantity = parseInt(newQuantity);
displayStocks();
}
}
當使用者點擊「編輯」按鈕時，會呼叫 editStock() 函式，透過 prompt() 彈出一個對話框，讓使用者輸入新的數量。這裡會檢查使用者的輸入是否為數字，並更新股票的數量。更新後，會再次呼叫 displayStocks() 來顯示更新後的資料。
這個程式使用 JavaScript 動態處理網頁中的資料，操作股票列表的增、刪、改功能。透過簡單的 DOM 操作、事件監聽和陣列操作，我們實現了一個互動的股票管理系統。
iThome鐵人賽
看影片追技術