Javascript: navigate table inputs with arrow keys

Question

I am working on an HTML grade book for a client. I am generating the gradebook with PHP, and then outputting a HTML table as seen in the example below. Each contains a div with an for the teacher to type in the student's score.

Here's what I'm trying to accomplish: how can I make it so the teacher can use the arrow keys on the keyboard to navigate inside of the gradebook? IE: The teacher should be able to click a cell, type in a grade, and then hit the left/right/up/down arrow key to move to the appropriate input and type in the next grade.

I have seen numerous examples on here about how to use javascript to accomplish this task in highlighting different cells, but I cannot figure out how I would go about allowing the teacher to navigate inputs with her arrow keys. Any advice would be much appreciated.

   body {
     margin: 0;
     position: absolute;
     top: 105px; left: 0px;
     width: 100%;
     height: calc(100vh - 105px);
     background-color: #FCFCFC;
     display: grid;
     grid-template-rows: 1fr;
     grid-template-areas:
       "master"}

   .master {
     grid-area: master;
     overflow-x: scroll;}

   table {border-collapse: collapse}

   th, td {
     background-color: white;
     max-width: 110px;
     border: 1px solid lightgray;}

   th {overflow: hidden;}

  thead{
    top: 0;
    position: sticky;
    z-index: 1;}

  tr td:nth-child(1),
  tr th:nth-child(1){
    position: sticky;
    left: 0;}

   thead th.navigator { /* Top left cell with navigation controls */
     padding: 10px;
     z-index: 3;}

   tr td:first-child, tr td:nth-child(2) { /* First two columns of each row */
     white-space: nowrap;
     max-width: fit-content !important;}

   td input {
     border: none;
     outline: none;
     text-align: center;
     max-width: 80%;
     font-size: 18px;
     padding: 6px 0px;
     cursor: cell;}

   th select {
     outline: none;
     -webkit-appearance: none;
     padding: 8px 12px;
     box-sizing: border-box;
     border-radius: 8px;
     width: 100%;
     border: 1px solid lightgray}

  tr:focus-within td:not(.gray) {background-color: #E9DCF9}
  tr:focus-within td:not(.gray) input {background-color: #E9DCF9}

  .due {
    font-size: 11px;
    color: darkgray;}

   .assign {padding: 20px}
   .assign span {
     cursor: pointer;
     font-size: 15px;
     overflow: hidden;
     color: #581F98}

   .avg {padding: 10px}

   .studentInfo {
     display: flex;
     align-items: center;
     margin: 10px 12px 10px 6px;}

   .studentInfo img {
     width: 25px;
     margin-right: 10px;
     clip-path: circle();}

   .red {background-color: red;}
   .gray, .gray input {background-color: #F2F2F2;}

  .score {
    display: flex;
    justify-content: center;
    align-items: center;}

        
          
            
              
                
                  
                  
                
              
              

                10/11 to 10/13
                10/20 to 10/22
                10/18 to 10/22
                10/20 to 10/22
              
              
                
                  📚 Quiz
                
                
                  📚 Homework
                
                
                  💻 Test
                
                
                  ✏️ Project
                
            
            
              91%
              87%
              87%
              80%
            
          
          
            
              
                
                John Doe
              
            
            
              89%
            
            
              
                
              
            
            
              
                
              
            
            
              
                
              
            
            
              
                
              
            
          
          
            
              
                
                Jane Doe
              
            
            
              69%
            
            
              
                
              
            
            
              
                
              
            
            
              
                
              
            
            
              
                
              
            
          
          
            
              
                
                Sally Martin
              
            
            
              100%

Getter Jetter · Accepted Answer

It's not perfect but it should give you a place to start. You'll have to add some error handling and handle edge cases.

document.addEventListener( 'keydown', ( event ) => {

  const currentInput = document.activeElement;
  const currentTd = currentInput.parentNode.parentNode;
  const currentTr = currentTd.parentNode;
  const index = Array.from(currentTr.children).indexOf(currentTd);

  switch (event.key) {
    case "ArrowLeft":
        // Left pressed
        currentTd.previousElementSibling.getElementsByTagName('input')[0].focus();
        break;
    case "ArrowRight":
        // Right pressed
        currentTd.nextElementSibling.getElementsByTagName('input')[0].focus();
        break;
    case "ArrowUp":
        // Up pressed
        Array.from( currentTr.previousElementSibling.children )[index].getElementsByTagName('input')[0].focus();
        break;
    case "ArrowDown":
        // Down pressed
        Array.from( currentTr.nextElementSibling.children )[index].getElementsByTagName('input')[0].focus();
        break;
  }
} )

body {
     margin: 0;
     position: absolute;
     top: 105px; left: 0px;
     width: 100%;
     height: calc(100vh - 105px);
     background-color: #FCFCFC;
     display: grid;
     grid-template-rows: 1fr;
     grid-template-areas:
       "master"}

   .master {
     grid-area: master;
     overflow-x: scroll;}

   table {border-collapse: collapse}

   th, td {
     background-color: white;
     max-width: 110px;
     border: 1px solid lightgray;}

   th {overflow: hidden;}

  thead{
    top: 0;
    position: sticky;
    z-index: 1;}

  tr td:nth-child(1),
  tr th:nth-child(1){
    position: sticky;
    left: 0;}

   thead th.navigator { /* Top left cell with navigation controls */
     padding: 10px;
     z-index: 3;}

   tr td:first-child, tr td:nth-child(2) { /* First two columns of each row */
     white-space: nowrap;
     max-width: fit-content !important;}

   td input {
     border: none;
     outline: none;
     text-align: center;
     max-width: 80%;
     font-size: 18px;
     padding: 6px 0px;
     cursor: cell;}

   th select {
     outline: none;
     -webkit-appearance: none;
     padding: 8px 12px;
     box-sizing: border-box;
     border-radius: 8px;
     width: 100%;
     border: 1px solid lightgray}

  tr:focus-within td:not(.gray) {background-color: #E9DCF9}
  tr:focus-within td:not(.gray) input {background-color: #E9DCF9}

  .due {
    font-size: 11px;
    color: darkgray;}

   .assign {padding: 20px}
   .assign span {
     cursor: pointer;
     font-size: 15px;
     overflow: hidden;
     color: #581F98}

   .avg {padding: 10px}

   .studentInfo {
     display: flex;
     align-items: center;
     margin: 10px 12px 10px 6px;}

   .studentInfo img {
     width: 25px;
     margin-right: 10px;
     clip-path: circle();}

   .red {background-color: red;}
   .gray, .gray input {background-color: #F2F2F2;}

  .score {
    display: flex;
    justify-content: center;
    align-items: center;}


          
            
              
                
                  
                  
                
              
              

                10/11 to 10/13
                10/20 to 10/22
                10/18 to 10/22
                10/20 to 10/22
              
              
                
                  📚 Quiz
                
                
                  📚 Homework
                
                
                  💻 Test
                
                
                  ✏️ Project
                
            
            
              91%
              87%
              87%
              80%
            
          
          
            
              
                
                John Doe
              
            
            
              89%
            
            
              
                
              
            
            
              
                
              
            
            
              
                
              
            
            
              
                
              
            
          
          
            
              
                
                Jane Doe
              
            
            
              69%
            
            
              
                
              
            
            
              
                
              
            
            
              
                
              
            
            
              
                
              
            
          
          
            
              
                
                Sally Martin
              
            
            
              100%

Javascript: navigate table inputs with arrow keys

Answers (2)

Related Questions