我使用
HTML表创建了一个非常基本的电子表格.它完美无缺,但用户必须使用鼠标点击每个< td>为了编辑它.我正在使用jQuery捕获click事件并显示一个对话框来编辑它.我希望用户能够使用箭头键导航到每个单元格,单元格css背景更改以指示焦点,单击Enter键将触发jQuery对话框事件.我正在使用jQuery 1.9.
这里基本上是我的jsfiddle.
如何保存当前选定的单元格,以便在使用鼠标单击单元格,然后使用箭头键时,它将从“当前”单元格导航？
谢谢.
解决方法
下面是一个使用onkeydown事件并使用prevIoUsElementSibling和nextElementSibling属性的vanilla JavaScript解决方案.
https://jsfiddle.net/rh5aoxsL/
使用tabindex的问题在于,您无法像在Excel中那样导航,您可以远离电子表格本身.
HTML
<table>
<tbody>
<tr>
<td id='start'>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</tbody>
</table>
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);
}
}