導航表 <tr> 帶鍵盤上/下箭頭

Question

我進行了很多搜索以找到解決方案，但是沒有找到明確的解釋。 我實際上有表（使用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"; } } } 

Answer 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>