我正在尝试在导航时从html表中获取计数过滤的行。我找不到任何明确的解决方案，请问最好的方法是什么？
以下是脚本的过滤部分：
function searchPokemon() {
var input, filter, found, table, tr, td, i, j;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
table = document.getElementById("pokemons-list");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td");
for (j = 0; j < td.length; j++) {
if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
found = true;
}
}
if (found) {
tr[i].style.display = "";
found = false;
} else {
tr[i].style.display = "none";
}
}
}
这里是表格导航部分：
var rows = document.getElementById("pokemons-list").children[1].children;
var selectedRow = 0;
document.body.onkeydown = function(e){
rows[selectedRow].style.backgroundColor = "#FFFFFF";
if(e.keyCode == 38){
selectedRow--;
} else if(e.keyCode == 40){
selectedRow++;
} else if(e.keyCode == 13){
Pokemon_ID = selectedRow + 1;
alert('Pokemon_ID = ' + Pokemon_ID);
}
if(selectedRow >= rows.length){
selectedRow = 0;
} else if(selectedRow < 0){
selectedRow = rows.length-1;
}
rows[selectedRow].style.backgroundColor = "dodgerblue";
rows[selectedRow].scrollIntoView(true);
};
答案 0 :(得分：1)
以下代码段是您尝试执行的操作的基本示例。运行代码段并输入＆＃39; Aa＆＃39; （没有引号）。请注意，当您按下向下箭头时，您会立即获得第一个Aa，但在下一行突出显示之前必须再按下3次。以下两个向下箭头实际上是隐藏的tr元素。隐藏的元素不会向用户显示，但它们仍然在DOM本身内。
解决方案： 在onkeydown事件期间，在将背景颜色更改为dodgerblue之前，请验证当前的tr元素是否没有display none。如果是，则再次循环并检查下一个预期结果。因为你已经循环，只要你不回到你开始的地方，那么你就不会有无限循环。
var searchPokemon;
var rows = document.getElementById("pokemons-list").children[1].children;
var selectedRow = 0;
document.body.onkeydown = function(e) {
rows[selectedRow].style.backgroundColor = "#FFFFFF";
if(e.keyCode == 38){
selectedRow--;
} else if(e.keyCode == 40){
selectedRow++;
} else if(e.keyCode == 13){
Pokemon_ID = selectedRow + 1;
alert('Pokemon_ID = ' + Pokemon_ID);
}
if(selectedRow >= rows.length){
selectedRow = 0;
} else if(selectedRow < 0){
selectedRow = rows.length-1;
}
rows[selectedRow].style.backgroundColor = "dodgerblue";
rows[selectedRow].scrollIntoView(true);
};
searchPokemon = function() {
var input, filter, found, table, tr, td, i, j;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
table = document.getElementById("pokemons-list");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td");
for (j = 0; j < td.length; j++) {
if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
found = true;
}
}
if (found) {
tr[i].style.display = "";
found = false;
} else {
tr[i].style.display = "none";
}
}
}<html>
<head>
</head>
<body>
<input id="mySearch" />
<button type="button" onclick="searchPokemon()">Filter</button>
<table id="pokemons-list">
<thead> </thead>
<tbody>
<tr style="background-color: rgb(255, 255, 255);">
<td>1</td>
<td>Aaa</td><td>
<img src=""></td>
</tr>
<tr style="background-color: rgb(255, 255, 255);">
<td>2</td>
<td>Aba</td><td>
<img src=""></td>
</tr>
<tr style="background-color: rgb(255, 255, 255);">
<td>3</td>
<td>Abb</td><td>
<img src=""></td>
</tr>
<tr style="background-color: rgb(255, 255, 255);">
<td>4</td>
<td>Aab</td><td>
<img src=""></td>
</tr>
</tbody>
</table>
</body>
</html>
下面的代码段应该更新，以便您可以进行相同的测试，但跳过隐藏的tr元素。
var searchPokemon;
var rows = document.getElementById("pokemons-list").children[1].children;
var selectedRow = 0;
document.body.onkeydown = function (e) {
rows[selectedRow].style.backgroundColor = "#FFFFFF";
var startedAt;
do {
startedAt = selectedRow;
if (e.keyCode == 38) {
selectedRow--;
} else if (e.keyCode == 40) {
selectedRow++;
} else if (e.keyCode == 13) {
Pokemon_ID = selectedRow + 1;
alert('Pokemon_ID = ' + Pokemon_ID);
}
if (selectedRow >= rows.length) {
selectedRow = 0;
} else if (selectedRow < 0) {
selectedRow = rows.length - 1;
}
} while (startedAt != selectedRow && rows[selectedRow].style.display === 'none');
rows[selectedRow].style.backgroundColor = "dodgerblue";
};
searchPokemon = function () {
var input, filter, found, table, tr, td, i, j;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
table = document.getElementById("pokemons-list");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td");
for (j = 0; j < td.length; j++) {
if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
found = true;
}
}
if (found) {
tr[i].style.display = "";
found = false;
} else {
tr[i].style.display = "none";
}
}
}<html>
<head>
</head>
<body>
<input id="mySearch" />
<button type="button" onclick="searchPokemon()">Filter</button>
<table id="pokemons-list">
<thead> </thead>
<tbody>
<tr style="background-color: rgb(255, 255, 255);">
<td>1</td>
<td>Aaa</td><td>
<img src=""></td>
</tr>
<tr style="background-color: rgb(255, 255, 255);">
<td>2</td>
<td>Aba</td><td>
<img src=""></td>
</tr>
<tr style="background-color: rgb(255, 255, 255);">
<td>3</td>
<td>Abb</td><td>
<img src=""></td>
</tr>
<tr style="background-color: rgb(255, 255, 255);">
<td>4</td>
<td>Aab</td><td>
<img src=""></td>
</tr>
</tbody>
</table>
</body>
</html>