使用键盘上下箭头导航表格(Navigate tablewith keyboard UpDown Arrows)

使用键盘上/下箭头导航表格(Navigate table with keyboard Up/Down Arrows)

我搜查了很多，为此找到解决方案，但我没有找到明确的解释。 我实际上有表（列出mySQL数据库与PHP中的数据）＆我希望它可以通过键盘箭头导航：当用户按向上或向下箭头时，它将重点放在上面/上面的行，并且背景颜色会改变。 我想学习如何在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";
                }
            }
        } 
  
 
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";
                }
            }
        } 
  
 

                
最满意答案
                
                    
                        
 尝试使用这个作为你的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> 
  
 
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> 
  
 
使用键盘上/下箭头导航表格(Navigate table  with keyboard Up/Down Arrows)

                
 我搜查了很多，为此找到解决方案，但我没有找到明确的解释。 我实际上有表（列出mySQL数据库与PHP中的数据）＆我希望它可以通过键盘箭头导航：当用户按向上或向下箭头时，它将重点放在上面/上面的行，并且背景颜色会改变。 我想学习如何在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";
                }
            }
        } 
  
 
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";
                }
            }
        } 
  
 

                
最满意答案
                
                    
                        
 尝试使用这个作为你的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> 
  
 
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>