JavaScript 表格数据搜索

封面图 • 2025-11-18 • JavaScript

在 JavaScript 中实现 **表格数据搜索**，通常是指对 HTML 表格（`<table>`）中的数据进行筛选和显示。下面是一个简单的示例，展示如何使用 JavaScript 实现一个基于输入框的表格搜索功能。

---

## ✅ 示例：HTML + JavaScript 表格搜索

### 1. HTML 结构

```html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>表格搜索示例</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 8px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

for (let i = 1; i < rows.length; i++) { // 从第1行开始（跳过表头）
                const row = rows[i];
                const cells = row.getElementsByTagName("td");
                let match = false;

for (let j = 0; j < cells.length; j++) {
                    const cell = cells[j];
                    if (cell.textContent.toLowerCase().indexOf(input) > -1) {
                        match = true;
                        break;
                    }
                }

if (match) {
                    row.style.display = "";
                } else {
                    row.style.display = "none";
                }
            }
        }
    </script>

</body>
</html>
```

---

## 🔍 功能说明：

- 用户在输入框中输入内容时，会触发 `searchTable()` 函数。
- 该函数遍历表格的所有行（除了表头），检查每一行的单元格是否包含输入的内容。
- 如果匹配，则显示该行；否则隐藏该行。

---

## 🧠 扩展建议：

1. **多列搜索**：支持按多个字段（如姓名、城市等）进行搜索。
2. **模糊搜索**：使用正则表达式或更高级的算法实现模糊匹配。
3. **分页**：如果数据量大，可以加入分页功能。
4. **动态加载数据**：结合 AJAX 或 Fetch API 从后端获取数据并渲染表格。

---

如果你有特定的需求（比如用 Vue/React 实现、从 JSON 数据生成表格、支持中文拼音搜索等），也可以告诉我，我可以提供更具体的实现方式。