要实现通过输入框查询已有的表中的数据并显示,可以使用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);
}
}
现在,当用户在输入框中输入查询内容并点击查询按钮时,他们将会看到根据输入内容查询到的表中的数据显示在表格中。