ändern Zelle Fokus auf Tastendruck

Question

Ich versuche etwas zu erreichen, ich bin mir nicht sicher, wird jemals funktionieren. Ich möchte den Zellfokus ändern, wenn der Benutzer eine Buchstabentaste drückt. Ich wünsche auch, dass der Buchstabe in der Quellzelle, aber nicht in der Zielzelle erscheint. Was ich versucht zu tun ist:

Benutzer eine Zelle markiert durch Anklicken

table.onclick = function tableMouseListener(event) { 
    markedCell = event.target; 
    markedCellRow = markedCell.parentNode.rowIndex; 
    markedCellCol = markedCell.cellIndex; 
}; 

Benutzer ein A in markierten Zelle

$(document).keypress(function(e){ 
    if (e.keyCode == 65) { 
    markedCell.appendChild(document.createTextNode(String.fromCharCode(e.keyCode))); 
    jumpToNextCell(); 
    }  
}); 

schreibt Nachdem die A wurde getippt, zur nächsten Zelle springen und sie fokussieren

function jumpToNextCell() { 
    table = document.getElementById('myTable'); 
    markedCellCol++; 
    markedCell = table.rows[markedCellRow].cells[markedCellCol]; 
    markedCell.appendChild(document.createTextNode('\u0020')); 
    markedCell.focus(); 
} 

Das Problem mit der obigen Logik ist, dass sowohl die Quell- als auch die Zielzelle jetzt den Buchstaben A enthält.

Gibt es eine Möglichkeit zu verhindern, dass der Brief der Zielzelle hinzugefügt wird?

Vielen Dank im Voraus!

EDIT

Die Quelle Zelle ist diejenige, die ich zu markieren und die Zielzelle ist derjenige Ich springe.

Answer 1

Klar die fokussierte Zelle nach keyPress

markedCell.innterText=''; 

in JQuery Syntax

$('#markedCellSelector').val(''); 

Answer 2

Ich habe eine fiddle, die das gesamte Feature implementiert

Und hier ist der JS Code:

var btns = Array.prototype.slice.call(document.querySelectorAll('button')), 
    markedBtn; 

btns.forEach(function(btn) { 
    btn.addEventListener('click', function(){ 
     btns.forEach(function(btn) { 
      btn.classList = Array.prototype.slice.call(btn.classList).filter(function(className) { 
       return className !== 'marked'; 
      }); 
     }); 

     btn.className += ' marked'; 
     markedBtn = this; 
    }); 
}); 

document.addEventListener('keyup', function(e) { 
    var char = String.fromCharCode(e.which); 

    if(markedBtn) { 
     markedBtn.innerText = char; 

     if(markedBtn.nextElementSibling) { 
      markedBtn = markedBtn.nextElementSibling; 
      markedBtn.click(); 
     } 
    } 
});