Navigate table <tr> with keyboard Up/Down Arrows

Question

I searched a lot to find a solution for this but I didn't found clear explanation. I actually have table (listing data from mySQL database with PHP) & I want it to be navigable with keyboard arrows: when the user press the up or down arrow, it focuses on the row above/over and that the background color changes. I want to learn how to do this in JavaScript please not the jQuery solution

Here is the table:

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

Also the table has a search bar which filters rows with this script :

 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

Try using this as your 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";
};

I've made a quick example of this working on a more basic table:

 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>