Navigate table cells using up,down,left,right buttons

Question

I'm building a program in JavaScript that's supposed to allow the user to navigate between table cells using up,down,left,right buttons. The appropriate table cell is highlighted after a directional button is clicked.

My table looks like this:

I'm working on building the functions to control the directional buttons, but I'm extremely lost on how to approach this. I need to be able to pass an argument that contains the currently highlighted cell, but I can't figure out how to do that.

My JavaScript so far, which doesn't really do much:

function right() {
    document.getElementById("one").nextElementSibling.style.border = '2px solid black';
}

Any help on how to deal with this would be great, because I really have no idea how to go about it.

Answer 1

A DYNAMIC SOLUTION USING PURE JS

You can essentially store the table objects in a 2-d matrix. While doing this have two global coordinates X and Y that store the current grid location. You can bind click events and keyboard events that track where the current focus is.

Take a look at the fiddle: https://jsfiddle.net/cnkr7wqa/5/

Note that this solution is dynamic regardless of the row size or the column size if every row is the same length and every column is the same length.

Also note that this works for: mouse clicks, directional keyboard presses, and button presses

HTML

<table>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
<tr>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
<tr>
  <td>7</td>
  <td>8</td>
  <td>9</td>
</tr>
</table>

<button>Left</button>
<button>Up</button>
<button>Right</button>
<button>Down</button>

Javascript

var dat = document.getElementsByTagName('td');
var numOfColumns = document.getElementsByTagName('tr').length;
var numOfRows = document.getElementsByTagName('tr').length;
var currIndex = 0;
var rowObj = document.getElementsByTagName('tr');
var oneColLength = rowObj[0].children.length;
var colObj = document.getElementsByTagName('td');
var totalData = rowObj.length * colObj.length;
var dataCounter = 0;
var matrixObj = new Array(rowObj.length);
var currentX = 0;
var currentY = 0;
var buttons = document.getElementsByTagName('button');

for(var i = 0; i < matrixObj.length; i++){
   matrixObj[i] = new Array(oneColLength);
}

for(var i = 0; i < numOfRows; i++){
  for(var j = 0; j < oneColLength; j++){
     matrixObj[i][j] = colObj[dataCounter++];
  }
}

for(var i = 0; i < buttons.length; i++){
  buttons[i].addEventListener("click",function(){
    removeAllBorders();
    compareBtnEntity(this);
  });
}

for(var i = 0; i < dat.length; i++){
  dat[i].addEventListener("click",function(){
    removeAllBorders();
    this.style.border = "1px solid red";
    compareEntity(this);
  });
}

window.addEventListener("keyup",function(e){
       switch(e.keyCode){
            case 37: 
                if(currentX > 0){
                  currentX--;
                  repaint();
                }
                break;
            case 38: 
                if(currentY > 0){
                  currentY--;
                  repaint();
                }
                break;
            case 39: 
                if(currentX < oneColLength-1){
                  currentX++;
                  repaint();
                }
                break;
            case 40: 
                if(currentY < matrixObj.length-1){
                  currentY++;
                  repaint();
                }
                break;          
        }
})

function removeAllBorders(){
  for(var i = 0; i < dat.length; i++){
    dat[i].style.border = "1px solid grey";
  }
}

function compareEntity(ele){
  for(var i = 0; i < matrixObj.length; i++){
    for(var j = 0; j < oneColLength; j++){
       if(ele == matrixObj[i][j]){
          currentX = j;
          currentY = i;
       }
    }
  }
}

function compareBtnEntity(ele){
        for(var i = 0; i < buttons.length; i++){
            if(buttons[i] == ele){
                break; 
            }
        }

    switch(i){
                case 0: 
                if(currentX > 0){
                  currentX--;
                  repaint();
                }
                break;
            case 1: 
                if(currentY > 0){
                  currentY--;
                  repaint();
                }
                break;
            case 2: 
                if(currentX < oneColLength-1){
                  currentX++;
                  repaint();
                }
                break;
            case 3: 
                if(currentY < matrixObj.length-1){
                  currentY++;
                  repaint();
                }
                break;       
      }
     repaint();
  }


function repaint(){
  removeAllBorders();
  matrixObj[currentY][currentX].style.border = "1px solid red";
}