过滤表搜索 - Javascript

在web应用程序中，通常需要为表格提供搜索功能，以帮助用户快速找到他们需要的信息。本文将介绍如何使用Javascript编写过滤表搜索功能。

功能描述

该搜索功能可以根据用户输入的关键字过滤表格内容，只显示匹配的行。用户可以在搜索框中输入任意字符来搜索，搜索结果会实时刷新。

程序实现

实现过滤表搜索的核心代码如下：

function filterTable() {
    // 获取搜索框和表格
    var input = document.getElementById("searchInput");
    var table = document.getElementById("dataTable");
    // 获取表格中的行
    var rows = table.getElementsByTagName("tr");
    // 遍历表格中的行
    for (var i = 0; i < rows.length; i++) {
        var row = rows[i];
        // 获取当前行的单元格内容
        var cells = row.getElementsByTagName("td");
        var showRow = false;
        // 对于每个单元格，检查是否匹配搜索关键字
        for (var j = 0; j < cells.length; j++) {
            var cell = cells[j];
            if (cell.innerHTML.indexOf(input.value) > -1) {
                showRow = true;
                break;
            }
        }
        // 根据是否匹配搜索关键字来显示/隐藏行
        if (showRow) {
            row.style.display = "";
        } else {
            row.style.display = "none";
        }
    }
}

// 监听搜索框的keyup事件，触发table的更新
var input = document.getElementById("searchInput");
input.onkeyup = filterTable;

使用方法

1. 在HTML中创建一个表格，为每个行和单元格添加ID和class属性。
2. 在HTML中创建一个包含搜索框和表格的div容器，为搜索框添加ID属性。
3. 将上述Javascript代码添加到HTML中。
4. 在CSS中定义表格的样式，包括宽度、边框等。
5. 在CSS中定义搜索框的样式，包括宽度、边框、背景色等。

### HTML代码示例

<table id="dataTable">
    <tr id="row1">
        <td class="col1">John</td>
        <td class="col2">Doe</td>
        <td class="col3">john@example.com</td>
    </tr>
    <tr id="row2">
        <td class="col1">Mary</td>
        <td class="col2">Moe</td>
        <td class="col3">mary@example.com</td>
    </tr>
    <tr id="row3">
        <td class="col1">July</td>
        <td class="col2">Dooley</td>
        <td class="col3">july@example.com</td>
    </tr>
</table>

<div id="tableContainer">
    <input type="text" id="searchInput">
    <div id="dataTable">
        <!--表格代码在此处-->
     </div>
</div>

### CSS代码示例

#dataTable {
    border-collapse: collapse;
    width: 100%;
}

#dataTable td, #dataTable th {
    border: 1px solid #ddd;
}

#dataTable th {
    padding: 10px;
    text-align: left;
}

#tableContainer #searchInput {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
}