通过输入框查询已有的表中的数据并显示

最新推荐文章于 2024-03-19 14:17:30 发布

原创最新推荐文章于 2024-03-19 14:17:30 发布 · 823 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

要实现通过输入框查询已有的表中的数据并显示，可以使用HTML、CSS和JavaScript来完成。以下是一个简单的示例：

首先，创建一个HTML文件，包含一个输入框、一个按钮和一个用于显示结果的表格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询数据</title>
</head>
<body>
    <input type="text" id="searchInput" placeholder="请输入查询内容">
    <button onclick="search()">查询</button>
    <table id="resultTable">
        <thead>
            <tr>
                <th>列1</th>
                <th>列2</th>
                <th>列3</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

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

2接下来，创建一个JavaScript文件（例如：script.js），并编写一个名为search的函数，该函数将在用户点击按钮时执行。在这个函数中，我们将获取输入框中的值，并根据这个值查询已有的表中的数据，然后将结果显示在表格中。

function search() {
    // 获取输入框的值
    var inputValue = document.getElementById("searchInput").value;

    // 假设已有的表数据如下
    var tableData = [
        ["数据1", "数据2", "数据3"],
        ["数据4", "数据5", "数据6"],
        ["数据7", "数据8", "数据9"]
    ];

    // 根据输入框的值查询表中的数据
    var resultData = tableData.filter(function(row) {
        return row.some(function(cell) {
            return cell.includes(inputValue);
        });
    });

    // 将结果显示在表格中
    var resultTable = document.getElementById("resultTable");
    resultTable.innerHTML = ""; // 清空表格内容
    var thead = resultTable.querySelector("thead");
    var tbody = resultTable.querySelector("tbody");

    // 添加表头
    var headerRow = document.createElement("tr");
    for (var i = 0; i < thead.rows[0].cells.length; i++) {
        var th = document.createElement("th");
        th.textContent = thead.rows[0].cells[i].textContent;
        headerRow.appendChild(th);
    }
    thead.appendChild(headerRow);

    // 添加查询结果
    for (var i = 0; i < resultData.length; i++) {
        var tr = document.createElement("tr");
        for (var j = 0; j < resultData[i].length; j++) {
            var td = document.createElement("td");
            td.textContent = resultData[i][j];
            tr.appendChild(td);
        }
        tbody.appendChild(tr);
    }
}

现在，当用户在输入框中输入查询内容并点击查询按钮时，他们将会看到根据输入内容查询到的表中的数据显示在表格中。