使用箭头键导航HTML表格

我使用HTML表创建了一个非常基本的电子表格。 它完美无缺，但用户必须使用鼠标点击每个

才能进行编辑。 我正在使用jQuery捕获click事件并显示一个对话框来编辑它。 我希望用户能够使用箭头键导航到每个单元格，单元格css背景更改以指示焦点，单击Enter键将触发jQuery对话框事件。 我正在使用jQuery 1.9。

这是一个基本上我所拥有的jsfiddle 。

如何保存当前选定的单元格，以便在使用鼠标单击单元格，然后使用箭头键时，它将从“当前”单元格导航？

谢谢。

Answer 1

下面是一个使用onkeydown事件并使用previousElementSibling和nextElementSibling属性的vanilla JavaScript解决方案。

https://jsfiddle.net/rh5aoxsL/

使用tabindex的问题在于，您无法按照Excel中的方式进行导航，并且可以远离电子表格本身。

HTML

 
 
 
 
1
 
2
 
3
 
4
 
 
 
5
 
6
 
7
 
8
 
 
 
9
 
10
 
11
 
12
 
 
 
13
 
14
 
15
 
16
 
 
  

CSS

 table { border-collapse: collapse; border: 1px solid black; } table td { border: 1px solid black; padding: 10px; text-align: center; } 

JavaScript

 var start = document.getElementById('start'); start.focus(); start.style.backgroundColor = 'green'; start.style.color = 'white'; function dotheneedful(sibling) { if (sibling != null) { start.focus(); start.style.backgroundColor = ''; start.style.color = ''; sibling.focus(); sibling.style.backgroundColor = 'green'; sibling.style.color = 'white'; start = sibling; } } document.onkeydown = checkKey; function checkKey(e) { e = e || window.event; if (e.keyCode == '38') { // up arrow var idx = start.cellIndex; var nextrow = start.parentElement.previousElementSibling; if (nextrow != null) { var sibling = nextrow.cells[idx]; dotheneedful(sibling); } } else if (e.keyCode == '40') { // down arrow var idx = start.cellIndex; var nextrow = start.parentElement.nextElementSibling; if (nextrow != null) { var sibling = nextrow.cells[idx]; dotheneedful(sibling); } } else if (e.keyCode == '37') { // left arrow var sibling = start.previousElementSibling; dotheneedful(sibling); } else if (e.keyCode == '39') { // right arrow var sibling = start.nextElementSibling; dotheneedful(sibling); } } 

Answer 2

根据我在其他几篇文章中找到的信息，我想出来了。 我把它们全部卷起来，结果很完美。

注意：您必须在每个

上放置一个tabindex属性以允许导航。

这是jsfiddle 。 下面列出了相同的代码。

HTML：

 
 
 
 
Col 1
 
Col 2
 
Col 3
 
Col 4
 
Col 5
 
Col 6
 
Col 7
 
Col 8
 
 
 
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
 
 
10
 
11
 
12
 
13
 
14
 
15
 
16
 
17
 
 
 
 
 
   
  

CSS：

 * { font-size: 12px; font-family: 'Helvetica', Arial, Sans-Serif; box-sizing: border-box; } table, th, td { border-collapse:collapse; border: solid 1px #ccc; padding: 10px 20px; text-align: center; } th { background: #0f4871; color: #fff; } tr:nth-child(2n) { background: #f1f1f1; } td:hover { color: #fff; background: #CA293E; } td:focus { background: #f44; } .editing { border: 2px dotted #c9c9c9; } #edit { display: none; } 

jQuery：

 var currCell = $('td').first(); var editing = false; // User clicks on a cell $('td').click(function() { currCell = $(this); edit(); }); // Show edit box function edit() { editing = true; currCell.toggleClass("editing"); $('#edit').show(); $('#edit #text').val(currCell.html()); $('#edit #text').select(); } // User saves edits $('#edit form').submit(function(e) { editing = false; e.preventDefault(); // Ajax to update value in database $.get('#', '', function() { $('#edit').hide(); currCell.toggleClass("editing"); currCell.html($('#edit #text').val()); currCell.focus(); }); }); // User navigates table using keyboard $('table').keydown(function (e) { var c = ""; if (e.which == 39) { // Right Arrow c = currCell.next(); } else if (e.which == 37) { // Left Arrow c = currCell.prev(); } else if (e.which == 38) { // Up Arrow c = currCell.closest('tr').prev().find('td:eq(' + currCell.index() + ')'); } else if (e.which == 40) { // Down Arrow c = currCell.closest('tr').next().find('td:eq(' + currCell.index() + ')'); } else if (!editing && (e.which == 13 || e.which == 32)) { // Enter or Spacebar - edit cell e.preventDefault(); edit(); } else if (!editing && (e.which == 9 && !e.shiftKey)) { // Tab e.preventDefault(); c = currCell.next(); } else if (!editing && (e.which == 9 && e.shiftKey)) { // Shift + Tab e.preventDefault(); c = currCell.prev(); } // If we didn't hit a boundary, update the current cell if (c.length > 0) { currCell = c; currCell.focus(); } }); // User can cancel edit by pressing escape $('#edit').keydown(function (e) { if (editing && e.which == 27) { editing = false; $('#edit').hide(); currCell.toggleClass("editing"); currCell.focus(); } });