要在表格中设置搜索引擎,可以使用 JavaScript 实现。下面是一个简单的例子:
html
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
名称 | 价格 | 数量 |
---|---|---|
产品 A | $10.00 | 50 |
产品 B | $15.00 | 30 |
产品 C | $20.00 | 20 |
function searchTable() {
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");
for (var j = 0; j < td.length; j++) {
if (td[j]) {
txtValue = td[j].textContent || td[j].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
break;
} else {
tr[i].style.display = "none";
}
}
}
}
}
这个例子中,我们创建了一个输入框和一个表格。当用户在输入框中输入搜索关键词时,JavaScript 会遍历表格中的每一行,并根据搜索关键词在每个单元格中进行匹配。如果找到匹配项,则显示该行,否则隐藏该行。
这个例子可以根据实际需求进行扩展,例如添加分页功能、对搜索结果进行排序等。同时也可以使用第三方库如 jQuery 或 Vue.js 来实现更复杂的表格搜索功能。
查看详情
查看详情