純粹試玩
看看會出現什麼結果
敘述內容:產生一個網頁形式濾水器濾心更換記錄表;須包含更換日期、濾芯圖像、濾芯名稱、單價,添加紀錄項目按鍵.
就產生了
<!DOCTYPE html>
<html>
<head>
<title>濾水器濾心更換記錄表</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
.filter-image {
max-width: 100px;
max-height: 100px;
}
</style>
</head>
<body>
<h1>濾水器濾心更換記錄表</h1>
<table id="filterTable">
<thead>
<tr>
<th>更換日期</th>
<th>濾芯圖像</th>
<th>濾芯名稱</th>
<th>單價</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br>
<button onclick="addRecord()">添加紀錄項目</button>
<script>
function addRecord() {
var table = document.getElementById("filterTable").getElementsByTagName('tbody')[0];
var newRow = table.insertRow(table.rows.length);
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
var cell4 = newRow.insertCell(3);
// 創建輸入框和圖像選擇
cell1.innerHTML = '<input type="date">';
cell2.innerHTML = '<input type="file" accept="image/*" onchange="previewImage(this)"> <img class="filter-image" src="" alt="濾芯圖像">';
cell3.innerHTML = '<input type="text" placeholder="濾芯名稱">';
cell4.innerHTML = '<input type="number" placeholder="單價">';
}
function previewImage(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
input.nextElementSibling.src = e.target.result;
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
</body>
</html>
附帶
說明:
HTML 結構:
創建了一個表格(),包含表頭()和表體()。
表頭包含「更換日期」、「濾芯圖像」、「濾芯名稱」和「單價」四個欄位。
表體用於動態添加記錄。
一個「添加紀錄項目」的按鈕()。
CSS 樣式:
簡單的 CSS 樣式用於表格的邊框、間距和對齊。
.filter-image 類用於限制濾芯圖像的大小。
JavaScript 功能:
addRecord() 函數:
在表格的末尾添加一個新的行()。
在新行中創建四個儲存格(),分別對應四個欄位。
在每個儲存格中添加相應的 HTML 輸入元素(日期選擇器、圖像上傳、文字輸入框和數字輸入框)。
previewImage() 函數:
當用戶選擇圖像時,使用 FileReader 讀取圖像文件。
將讀取的圖像數據設置為圖像元素的 src 屬性,以顯示預覽。
使用方法:
將上述 HTML 代碼保存為一個 .html 文件(例如 filter_log.html)。
使用網頁瀏覽器打開該文件。
點擊「添加紀錄項目」按鈕,即可添加新的濾芯更換記錄。
在相應的輸入框中填寫更換日期、濾芯名稱和單價。
點擊圖像上傳按鈕,選擇濾芯的圖像。
進階功能(可選):
本地存儲: 使用瀏覽器的本地存儲(localStorage 或 sessionStorage)來保存記錄,以便下次打開網頁時仍然存在。
編輯和刪除: 添加編輯和刪除按鈕,以便用戶修改或刪除現有的記錄。
數據驗證: 添加 JavaScript 驗證,以確保用戶輸入的數據格式正確。
排序和篩選: 添加排序和篩選功能,以便用戶更方便地查找和管理記錄。
匯出和匯入: 添加匯出(例如 CSV 或 Excel)和匯入功能,以便用戶備份或分享記錄。
響應式設計: 使用 CSS 媒體查詢,使網頁在不同設備(例如手機和平板電腦)上都能良好顯示。