html如何在搜索框条件筛选

admin
行业动态
2024-04-04
4824

在HTML中，可以使用<input>标签创建一个搜索框，并使用JavaScript或jQuery来实现条件筛选，以下是一个简单的示例：

1、创建一个HTML文件，添加一个搜索框和一个表格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>搜索框条件筛选</title>
    <style>
        table {
            width: 100%;
            bordercollapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            textalign: left;
        }
        th {
            backgroundcolor: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>搜索框条件筛选</h1>
    <input type="text" id="searchInput" onkeyup="filterTable()" placeholder="搜索...">
    <table id="myTable">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>城市</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>
        </tbody>
    </table>
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
    <script>
        function filterTable() {
            var input, filter, table, tr, td, i, txtValue;
            input = document.getElementById("searchInput");
            filter = input.value.toUpperCase();
            table = document.getElementById("myTable");
            tr = table.getElementsByTagName("tr");
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[0];
                if (td) {
                    txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > 1) {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
        }
    </script>
</body>
</html>

在这个示例中，我们创建了一个包含姓名、年龄和城市的表格，当用户在搜索框中输入内容时，filterTable()函数会根据输入的内容筛选表格中的行，如果某行的姓名与输入的内容匹配，该行将被显示；否则，该行将被隐藏。