javascript - 使用键盘向上/向下箭头导航表

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>