這個表格會有以下功能：
- 基本表格（顯示姓名、年齡、職業）
- CSS 美化（加上邊框、hover 效果、標題底色）
- JS 搜尋（可以輸入文字快速篩選）
- JS 排序（點欄位標題可以排序）
HTML
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>表格練習</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>表格練習：搜尋 & 排序</h2>
<!-- 搜尋框 -->
<input type="text" id="searchInput" placeholder="輸入關鍵字搜尋...">
<!-- 表格 -->
<table id="dataTable">
<thead>
<tr>
<th onclick="sortTable(0)">姓名 ⬍</th>
<th onclick="sortTable(1)">年齡 ⬍</th>
<th onclick="sortTable(2)">職業 ⬍</th>
</tr>
</thead>
<tbody>
<tr><td>小明</td><td>25</td><td>工程師</td></tr>
<tr><td>小美</td><td>30</td><td>設計師</td></tr>
<tr><td>阿強</td><td>28</td><td>老師</td></tr>
<tr><td>小華</td><td>22</td><td>學生</td></tr>
<tr><td>大雄</td><td>35</td><td>醫生</td></tr>
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>
CSS (style.css)
body {
font-family: "Microsoft JhengHei", sans-serif;
padding: 20px;
background: #f9f9f9;
}
h2 {
color: #333;
}
#searchInput {
margin-bottom: 10px;
padding: 6px;
width: 250px;
border: 1px solid #ccc;
border-radius: 5px;
}
table {
width: 100%;
border-collapse: collapse;
background: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
cursor: pointer;
}
tr:hover {
background-color: #f1f1f1;
}
JavaScript (script.js)
// 搜尋功能
document.getElementById("searchInput").addEventListener("keyup", function () {
let filter = this.value.toLowerCase();
let rows = document.querySelectorAll("#dataTable tbody tr");
rows.forEach(row => {
let text = row.textContent.toLowerCase();
row.style.display = text.includes(filter) ? "" : "none";
});
});
// 排序功能
function sortTable(n) {
let table = document.getElementById("dataTable");
let rows = Array.from(table.rows).slice(1); // 排除標題列
let isAscending = table.getAttribute("data-sort-dir") === "asc";
let dir = isAscending ? -1 : 1;
rows.sort((a, b) => {
let x = a.cells[n].innerText;
let y = b.cells[n].innerText;
// 如果是數字欄位，用數字比較
return isNaN(x) || isNaN(y) ? x.localeCompare(y, "zh-Hant") * dir : (x - y) * dir;
});
rows.forEach(r => table.tBodies[0].appendChild(r));
table.setAttribute("data-sort-dir", isAscending ? "desc" : "asc");
}
畫面展示
搜尋
