我经常搜索以找到解决方案,但我没有找到明确的解释。我实际上有表(用PHP列出来自mySQL数据库的数据)&我希望它可以通过键盘箭头导航:当用户按向上或向下箭头时,它会聚焦在上方/上方的行上,并且背景颜色会发生变化。我想学习如何在JavaScript中执行此操作,而不是jQuery解决方案
这是表格:
<table id="pokemons-list">
<thead>
<tr>
<th>NO</th>
<th>Nom</th>
<th></th>
</tr>
</thead>
<tbody>
<?php
include 'database.php';
$pdo = Database::connect();
$sql = 'SELECT * FROM pokemons ORDER BY id ASC';
foreach ($pdo->query($sql) as $row) {
echo '<tr tabindex="-1">';
echo '<td style="text-align:center">'. $row['id'] . '</td>';
echo '<td>'. $row['name'] . '</td>';
echo '<td>'. '<img style="vertical-align:middle;margin: 0px 0px 0px -20px;" src="icons/'. $row['id'].'.png"></td>';
echo '</tr>';
}
Database::disconnect();
?>
</tbody>
</table>
该表还有一个搜索栏,可以使用此脚本过滤行:
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";
}
}
}
答案 0 :(得分:1)
尝试将其用作JS:
var rows = document.getElementById("pokemons-list").children[1].children;
var selectedRow = 0;
document.body.onkeydown = function(e){
//Prevent page scrolling on keypress
e.preventDefault();
//Clear out old row's color
rows[selectedRow].style.backgroundColor = "#FFFFFF";
//Calculate new row
if(e.keyCode == 38){
selectedRow--;
} else if(e.keyCode == 40){
selectedRow++;
}
if(selectedRow >= rows.length){
selectedRow = 0;
} else if(selectedRow < 0){
selectedRow = rows.length-1;
}
//Set new row's color
rows[selectedRow].style.backgroundColor = "#FFFFAA";
};
我在一个更基本的表格上做了一个简单的例子:
var rows = document.getElementById("pokemons-list").children[1].children;
var selectedRow = 0;
document.body.onkeydown = function(e){
//Prevent page scrolling on keypress
e.preventDefault();
//Clear out old row's color
rows[selectedRow].style.backgroundColor = "#FFFFFF";
//Calculate new row
if(e.keyCode == 38){
selectedRow--;
} else if(e.keyCode == 40){
selectedRow++;
}
if(selectedRow >= rows.length){
selectedRow = 0;
} else if(selectedRow < 0){
selectedRow = rows.length-1;
}
//Set new row's color
rows[selectedRow].style.backgroundColor = "#8888FF";
};
//Set the first row to selected color
rows[0].style.backgroundColor = "#8888FF";
th, td {
border: 1px solid black;
}
<table id="pokemons-list">
<thead>
<tr>
<th>NO</th>
<th>Nom</th>
</tr>
</thead>
<tbody>
<!--In your case this is auto-generated-->
<tr>
<td>1</td><td>Charmander</td>
</tr>
<tr>
<td>2</td><td>Squirtle</td>
</tr>
<tr>
<td>3</td><td>Bulbasaur</td>
</tr>
<tr>
<td>4</td><td>Pikachu</td>
</tr>
<tr>
<td>5</td><td>Arceus</td>
</tr>
</tbody>
</table>