,可以通过以下步骤实现:
<input>
标签来创建输入框。<input type="text" id="filterInput" onkeyup="filterTable()" placeholder="输入关键字筛选">
filterTable()
。该函数将获取输入框中的值,并与表格中的每一行进行比较,隐藏不符合条件的行。function filterTable() {
// 获取输入框的值
var input = document.getElementById("filterInput");
var filter = input.value.toUpperCase();
// 获取表格
var table = document.getElementById("myTable");
// 获取表格中的每一行
var rows = table.getElementsByTagName("tr");
// 遍历每一行,隐藏不符合条件的行
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].getElementsByTagName("td");
var match = false;
// 遍历当前行的每一列,检查是否有匹配的内容
for (var j = 0; j < cells.length; j++) {
var cell = cells[j];
if (cell) {
var content = cell.textContent || cell.innerText;
if (content.toUpperCase().indexOf(filter) > -1) {
match = true;
break;
}
}
}
// 根据匹配结果显示/隐藏行
if (match) {
rows[i].style.display = "";
} else {
rows[i].style.display = "none";
}
}
}
<td>
标签来显示数据。<table id="myTable">
<tr>
<td>行1,列1</td>
<td>行1,列2</td>
</tr>
<tr>
<td>行2,列1</td>
<td>行2,列2</td>
</tr>
<!-- 添加更多行... -->
</table>
通过以上步骤,就可以实现使用一个输入筛选表的两行数据。用户在输入框中输入关键字时,表格将根据输入内容动态显示匹配的行。这种功能常用于数据展示和搜索功能的实现。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云