CSS 实现表格数据排序筛选后高亮示例详解
随着互联网技术的不断发展，前端开发领域对用户体验的要求越来越高。表格作为网页中展示数据的重要方式，其交互性和美观性变得尤为重要。本文将围绕 CSS 技术实现表格数据排序筛选后高亮的功能，通过一个示例来详细讲解相关技术。
1. 前言
在网页中，表格常用于展示结构化数据。用户可以通过排序和筛选功能来快速找到所需信息。为了提升用户体验，我们可以在表格中实现高亮显示，让用户更加直观地看到筛选和排序后的结果。本文将使用 HTML、CSS 和 JavaScript 实现这一功能。
2. 示例需求
以下是一个简单的表格示例，包含姓名、年龄和城市三个字段：
| 姓名 | 年龄 | 城市 |
| ---- | ---- | ---- |
| 张三 | 25 | 北京 |
| 李四 | 30 | 上海 |
| 王五 | 22 | 广州 |
| 赵六 | 28 | 深圳 |
我们需要实现以下功能：
1. 点击表格头部，对表格数据进行排序。
2. 在搜索框中输入关键词，筛选表格数据。
3. 对筛选和排序后的数据进行高亮显示。
3. 实现步骤
3.1 HTML 结构
我们需要创建一个 HTML 文件，并定义表格结构：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格排序筛选高亮示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="table-container">
<input type="text" id="search-input" placeholder="搜索...">
<table>
<thead>
<tr>
<th onclick="sortTable(0)">姓名</th>
<th onclick="sortTable(1)">年龄</th>
<th onclick="sortTable(2)">城市</th>
</tr>
</thead>
<tbody id="table-body">
<!-- 表格数据 -->
</tbody>
</table>
</div>
<script src="script.js"></script>
</body>
</html>
3.2 CSS 样式
接下来，我们需要为表格添加一些基本样式，并定义高亮显示的样式：
css
/ style.css /
.table-container {
width: 100%;
max-width: 600px;
margin: 20px auto;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid ddd;
}
th {
cursor: pointer;
}
tr:hover {
background-color: f5f5f5;
}
.highlight {
background-color: ffdfba;
}
3.3 JavaScript 逻辑
我们需要编写 JavaScript 代码来实现排序、筛选和高亮显示功能：
javascript
// script.js
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("table-body");
switching = true;
dir = "asc";
while (switching) {
switching = false;
rows = table.rows;
for (i = 1; i < (rows.length - 1); i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
switchcount++;
} else {
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
function filterTable() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("search-input");
filter = input.value.toUpperCase();
table = document.getElementById("table-body");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td");
for (var j = 0; j < td.length; j++) {
if (td[j]) {
txtValue = td[j].textContent || td[j].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
break;
} else {
tr[i].style.display = "none";
}
}
}
}
}
// 高亮显示
function highlightRow(row) {
row.classList.add("highlight");
}
function removeHighlight() {
var rows = document.getElementById("table-body").getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
rows[i].classList.remove("highlight");
}
}
// 绑定事件
document.getElementById("search-input").addEventListener("keyup", function() {
filterTable();
removeHighlight();
});
// 初始化表格数据
var tableBody = document.getElementById("table-body");
var data = [
["张三", 25, "北京"],
["李四", 30, "上海"],
["王五", 22, "广州"],
["赵六", 28, "深圳"]
];
for (var i = 0; i < data.length; i++) {
var row = document.createElement("tr");
for (var j = 0; j < data[i].length; j++) {
var cell = document.createElement("td");
cell.textContent = data[i][j];
row.appendChild(cell);
}
tableBody.appendChild(row);
}
4. 总结
本文通过 HTML、CSS 和 JavaScript 实现了一个表格数据排序筛选后高亮显示的示例。在实际开发中，我们可以根据需求对代码进行优化和扩展。例如，可以添加更多字段、支持更多排序方式、优化搜索性能等。
通过学习本文，读者可以掌握以下技能：
1. 使用 HTML 创建表格结构。
2. 使用 CSS 设置表格样式和交互效果。
3. 使用 JavaScript 实现排序、筛选和高亮显示功能。
希望本文对您有所帮助！
Comments NOTHING