我一直在寻找一个代码来搜索表格并显示单个单元格。不断尝试自己制作,并最终找到了一个除了一件事外完美的作品。当搜索栏清空时,它会显示第一个单元格,我不知道该怎么做,所以它会返回显示整个表格。
这是代码,非常感谢任何帮助。
var cells = document.querySelectorAll("#myTable td");
var search = document.getElementById("myInput");
search.addEventListener("keyup", function() {
for (var i = 0; i < cells.length; ++i) {
if (cells[i].textContent.toLowerCase().indexOf(search.value.toLowerCase()) === 0) {
cells.forEach(function(element) {
element.style.display = "none";
});
cells[i].style.display = "table-cell";
break;
} else {
cells.forEach(function(element) {
if (cells[i] !== element) {
element.style.display = "table-cell";
}
});
}
}
});
<input id="myInput">
<table id="myTable">
<tr>
<td>asd</td>
<td>dsa</td>
</tr>
<tr>
<td>123</td>
<td>321</td>
</tr>
<tr>
<td>412</td>
<td>124</td>
</tr>
</table>
下面是运行中的代码,您可以看到我的问题所在:https://jsfiddle.net/y1wof1go/
最佳答案
当输入框中没有输入任何内容(长度为零或空字符串)时,您需要使表格中的所有单元格再次可见。 这是一个fiddle .
和更新函数:
var cells = document.querySelectorAll("#myTable td");
var search = document.getElementById("myInput");
search.addEventListener("keyup", function() {
if (search.value.length > 0 && search.value != '') {
for (var i = 0; i < cells.length; ++i) {
if (cells[i].textContent.toLowerCase().indexOf(search.value.toLowerCase()) === 0) {
cells.forEach(function(element) {
element.style.display = "none";
});
cells[i].style.display = "table-cell";
break;
} else {
cells.forEach(function(element) {
if (cells[i] !== element) {
element.style.display = "table-cell";
}
});
}
}
} else {
cells.forEach(function(element) {
if (cells[i] !== element) {
element.style.display = "table-cell";
}
});
}
});
<input id="myInput">
<table id="myTable">
<tr>
<td>asd</td>
<td>dsa</td>
</tr>
<tr>
<td>123</td>
<td>321</td>
</tr>
<tr>
<td>412</td>
<td>124</td>
</tr>
</table>
关于javascript - HTML 表格搜索单个单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46773524/