如何对HTML表执行实时搜索和过滤

要实现对HTML表格的实时搜索和过滤，你可以使用JavaScript来监听输入框的变化，并根据输入的内容来过滤表格中的数据。以下是一个简单的示例：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实时搜索和过滤表格</title>
</head>
<body>
    <input type="text" id="searchInput" placeholder="搜索...">
    <table id="dataTable">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>城市</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>28</td>
                <td>北京</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>35</td>
                <td>上海</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>22</td>
                <td>广州</td>
            </tr>
            <!-- 更多数据行 -->
        </tbody>
    </table>

    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.getElementById('searchInput').addEventListener('input', function(e) {
    const searchValue = e.target.value.toLowerCase();
    const tableRows = document.querySelectorAll('#dataTable tbody tr');

    tableRows.forEach(row => {
        const rowData = row.textContent.toLowerCase();
        if (rowData.includes(searchValue)) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
});