Navigieren Tabellenzellen mit den Tasten nach oben, unten, links, rechts

Question

Ich baue ein Programm in JavaScript, die den Benutzer mit den Schaltflächen nach oben, unten, links, rechts zwischen Tabellenzellen navigieren können soll. Die entsprechende Tabellenzelle wird hervorgehoben, nachdem auf eine Richtungstaste geklickt wurde.

Meine Tabelle sieht wie folgt aus:

Ich arbeite die Funktionen auf den Aufbau der Richtungstasten zu steuern, aber ich bin sehr verloren, wie dies zu nähern. Ich muss in der Lage sein, ein Argument zu übergeben, das die aktuell markierte Zelle enthält, aber ich kann nicht herausfinden, wie das geht.

Mein JavaScript so weit, die nicht wirklich viel tun:

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

Jede Hilfe, wie man damit umgehen wäre toll, weil ich wirklich keine Ahnung, wie man das macht.

Answer 1

Eine dynamische Lösung PURE JS weiter verwenden

Sie können im Wesentlichen die Tabellenobjekte in einer 2-D-Matrix speichern. Währenddessen haben zwei globale Koordinaten X und Y, die den aktuellen Gitterstandort speichern. Sie können Klickereignisse und Tastaturereignisse binden, die verfolgen, wo der aktuelle Fokus liegt.

Werfen Sie einen Blick auf die Geige: https://jsfiddle.net/cnkr7wqa/5/

Beachten Sie, dass diese Lösung unabhängig von der Zeilengröße dynamisch ist oder die Spaltengröße wenn jede Zeile die gleiche Länge ist und jede Spalte ist die gleiche Länge.

Beachten Sie auch, dass dies funktioniert für: Mausklicks Richtungs Tastatur drückt, und Drücken von Tasten

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"; 
} 

Answer 2

ok habe ich eine Geige für Sie:

https://jsfiddle.net/c7f3hczs/

aber Anmerkung:

das funktioniert nur für "Pfeil nach rechts gedrückt". Sie müssen auch die anderen Schlüssel implementieren. Die Pfeile nach oben und nach unten sind ein wenig schwierig ... Sie müssen wissen, wie viele Spalten die Tabelle hat (Sie können diese Zahl herausfinden, indem Sie eine <tr> nehmen und alle <td> Elemente darin zählen.

js:

document.addEventListener("keydown", function (e) { 
if (e.keyCode == 39) document.getElementsByTagName("td").className = ""; 
var actualId = document.getElementsByClassName("active")[0].getAttribute("id"); 
var count = document.getElementsByTagName("td").length; 
console.log(count) 
document.getElementById(actualId).className="notActive"; 
if (parseInt(actualId)+1 < count) { 
    document.getElementById(parseInt(actualId)+1).className="active"; 
} else { 
    document.getElementById(0).className="active"; 
} 
}); 

keyCode „39“ ist die rechte Pfeiltaste

Answer 3

ich weiß, dass Sie nicht den jquery Tag auf diese enthielten, aber ich habe ein funktionierendes Beispiel here (https://jsfiddle.net/romellem/pg6eveht/) jQuery ein, um die Dinge etwas einfacher ..

Es gibt nichts übermäßig komplex, wo Sie die jQuery, die ich verwendet habe, nicht ausstreichen konnte, aber ich überlasse das als Übung für den Leser. :)

Ich verwendete das Prototyp-Muster, um eine Hililger-Klasse zu erstellen, wo Sie einen Selektor übergeben, um eine Tabelle zu initialisieren. Kopfzeilen werden in der Tabelle nicht berücksichtigt. Sie müssen diese also hinzufügen.

Ansonsten hilft Ihnen das hoffentlich, einen Schritt in die richtige Richtung zu machen, wenn Sie völlig verloren sind.

$(document).ready(function() { 
 
    var TableHilighter = function(table, selected) { 
 
    this.table = $(table); 
 
    this.rows = this.table.find('tr').length; 
 
    this.cols = this.table.find('tr').first().find('td').length; 
 
    this.selected = (typeof selected === 'undefined') ? [1, 1] : selected; 
 

 
    // Hilight our row on initialization 
 
    this.hilight(); 
 
    }; 
 

 
    TableHilighter.prototype = { 
 
    "hilight": function(cell) { 
 
     if (typeof cell === 'undefined') { 
 
     cell = this.selected; 
 
     } 
 
     // Clear all hilighted cells 
 
     this.table.find('td').removeClass('hilighted'); 
 

 
     // First find the row, then find the col, and add the .hilighted class 
 
     this.table.find('tr:nth-child(' + this.selected[1] + ')').find('td:nth-child(' + this.selected[0] + ')').addClass('hilighted'); 
 
    }, 
 
    "move": function(dir) { 
 
     switch (dir) { 
 
     case 'up': 
 
      this._up(); 
 
      break; 
 
     case 'down': 
 
      this._down(); 
 
      break; 
 
     case 'left': 
 
      this._left(); 
 
      break; 
 
     case 'right': 
 
      this._right(); 
 
      break; 
 
     default: 
 
      break; 
 
     } 
 
     this.hilight(); 
 
     return this.selected; 
 
    }, 
 
    "_left": function() { 
 
     if (this._x() > 1) { 
 
     this._x(this._x() - 1); 
 
     } 
 
     return this.selected; 
 
    }, 
 
    "_right": function() { 
 
     if (this._x() < this.cols) { 
 
     this._x(this._x() + 1); 
 
     } 
 
     return this.selected; 
 
    }, 
 
    "_up": function() { 
 
     if (this._y() > 1) { 
 
     this._y(this._y() - 1); 
 
     } 
 
     return this.selected; 
 
    }, 
 
    "_down": function() { 
 
     if (this._y() < this.rows) { 
 
     this._y(this._y() + 1); 
 
     } 
 
     return this.selected; 
 
    }, 
 
    "_x": function(x) { 
 
     if (typeof x === 'undefined') { 
 
     return this.selected[0]; 
 
     } else { 
 
     this.selected[0] = x; 
 
     return this.selected[0]; 
 
     } 
 
    }, 
 
    "_y": function(y) { 
 
     if (typeof y === 'undefined') { 
 
     return this.selected[1]; 
 
     } else { 
 
     this.selected[1] = y; 
 
     return this.selected[1]; 
 
     } 
 
    } 
 
    }; 
 

 
    // Initialize our TableHilighter 
 
    var my_table = new TableHilighter('table'); 
 

 
    // Add button event handlers 
 
    $('.up').on('click', function(e) { 
 
    e.preventDefault(); 
 
    my_table.move('up'); 
 
    }); 
 

 
    $('.down').on('click', function(e) { 
 
    e.preventDefault(); 
 
    my_table.move('down'); 
 
    }); 
 

 
    $('.left').on('click', function(e) { 
 
    e.preventDefault(); 
 
    my_table.move('left'); 
 
    }); 
 

 
    $('.right').on('click', function(e) { 
 
    e.preventDefault(); 
 
    my_table.move('right'); 
 
    }); 
 
});

table tr td { 
 
    border: 1px solid black; 
 
    padding: 2px; 
 
} 
 
.hilighted { 
 
    border: 2px solid red; 
 
    padding: 1px; 
 
} 
 
button.up { 
 
    margin-left: 2em; 
 
} 
 
button.down { 
 
    margin-left: 1.5em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td>1,1</td> 
 
    <td>2,1</td> 
 
    <td>3,1</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1,2</td> 
 
    <td>2,2</td> 
 
    <td>3,2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1,3</td> 
 
    <td>2,2</td> 
 
    <td>3,3</td> 
 
    </tr> 
 
</table> 
 

 
<button class="up">Up</button> 
 

 
<div> 
 
    <button class="left">Left</button> 
 
    <button class="right">Right</button> 
 
</div> 
 

 
<button class="down">Down</button>

Answer 4

Ein bequemer Weg, um mit diesem Problem umzugehen, ist sinnvoll id ‚s auf Ihre Zellen zu geben. Die Navigation wird dann selbsterklärend.

var dimensionX = 4; 
 
var dimensionY = 4; 
 
var selected = "cell-0-0"; 
 

 
$(document).keydown(function(event) { 
 

 
    event.preventDefault(); 
 
    $("#" + selected).removeClass("selected"); 
 
    var currentX = parseInt(selected.split("-")[1]); 
 
    var currentY = parseInt(selected.split("-")[2]); 
 

 
    switch (event.which) { 
 
    case 37: 
 
     selected = "cell-" + (currentX == 0 ? dimensionX - 1 : currentX - 1) + "-" + currentY; 
 
     break; 
 

 
    case 38: 
 
     selected = "cell-" + currentX + "-" + (currentY == 0 ? dimensionY - 1 : currentY - 1); 
 
     break; 
 

 
    case 39: 
 
     selected = "cell-" + ((currentX + 1) % dimensionX) + "-" + currentY; 
 
     break; 
 

 
    case 40: 
 
     selected = "cell-" + currentX + "-" + ((currentY + 1) % dimensionY); 
 
     break; 
 
    } 
 
    $("#" + selected).addClass("selected"); 
 
}); 
 

 
$("#up, #down, #left, #right").click(function() { 
 

 
    var currentX = parseInt(selected.split("-")[1]); 
 
    var currentY = parseInt(selected.split("-")[2]); 
 
    $("#" + selected).removeClass("selected"); 
 

 
    switch (this.id) { 
 
    case "up": 
 
     selected = "cell-" + currentX + "-" + (currentY == 0 ? dimensionY - 1 : currentY - 1); 
 
     break; 
 
    case "down": 
 
     selected = "cell-" + currentX + "-" + ((currentY + 1) % dimensionY); 
 
     break; 
 
    case "left": 
 
     selected = "cell-" + (currentX == 0 ? dimensionX - 1 : currentX - 1) + "-" + currentY; 
 
     break; 
 
    case "right": 
 
     selected = "cell-" + ((currentX + 1) % dimensionX) + "-" + currentY; 
 
     break; 
 
    } 
 
    $("#" + selected).addClass("selected"); 
 
}); 
 

 
$("#mark").click(function() { 
 
    if ($("#" + selected).hasClass("marked")) $("#" + selected).removeClass("marked"); 
 
    else $("#" + selected).addClass("marked"); 
 
});

td { 
 
    border: 1px solid black; 
 
} 
 
td.selected { 
 
    border: 1px solid red; 
 
} 
 
p.buttons > span { 
 
    border: 1px solid grey; 
 
    border-radius: 2px; 
 
    cursor: pointer; 
 
    margin: 0 3px; 
 
    display: inline-block; 
 
    padding: 1px 3px; 
 
} 
 
td.marked { 
 
    background: black; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="sheet"> 
 
    <tbody> 
 
    <tr id="row-0"> 
 
     <td id="cell-0-0" class="selected">A</td> 
 
     <td id="cell-1-0">B</td> 
 
     <td id="cell-2-0">C</td> 
 
     <td id="cell-3-0">D</td> 
 
    </tr> 
 
    <tr id="row-1"> 
 
     <td id="cell-0-1">E</td> 
 
     <td id="cell-1-1">F</td> 
 
     <td id="cell-2-1">G</td> 
 
     <td id="cell-3-1">H</td> 
 
    </tr> 
 
    <tr id="row-2"> 
 
     <td id="cell-0-2">I</td> 
 
     <td id="cell-1-2">J</td> 
 
     <td id="cell-2-2">K</td> 
 
     <td id="cell-3-2">L</td> 
 
    </tr> 
 
    <tr id="row-3"> 
 
     <td id="cell-0-3">M</td> 
 
     <td id="cell-1-3">N</td> 
 
     <td id="cell-2-3">O</td> 
 
     <td id="cell-3-3">P</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<p class="buttons"><span id="up">Up</span> <span id="down">Down</span> <span id="left">Left</span> <span id="right">Right</span> <span id="mark">Mark</span></p>

Sie müssen die Schnipsel konzentrieren, um die Pfeile zu verwenden, um sich zu bewegen.