在表中使用箭头键，但从选定的表单元格开始

Question

我正在尝试使用箭头键来导航表。
下面的代码可以工作，但问题是它只能从最后使用箭头键的地方导航。如果单击表中其他位置的单元格，则箭头键从键盘移动的最后一个位置开始，而不是从被单击的单元格开始。这是代码，我假设我需要将查询选择器的开始更改为鼠标最后单击/选择的地方。什么好主意吗?请只用Javascript，不要用jquery。谢谢你

function Mouse() { 
let start = document.querySelector('.first-element');
const changeStyle = (sibling) => {
if (sibling !== null) {
start.focus();
sibling.focus();
start = sibling;
}
}

const checkKey = (event) => {
event = event || window.event;
const idx = start.cellIndex;

if (event.keyCode === 38) {
// up arrow
const previousRow = start.parentElement.previousElementSibling;
if (previousRow !== null) {
const previousSibling = previousRow.cells[idx];
changeStyle(previousSibling);
}
} else if (event.keyCode === 40) {
// down arrow
const nextRow = start.parentElement.nextElementSibling;
if (nextRow !== null) {
const nextSibling = nextRow.cells[idx];
changeStyle(nextSibling);
}
} else if (event.keyCode === 37) {
// left arrow
const previousSibling = start.previousElementSibling;
changeStyle(previousSibling);
} else if (event.keyCode === 39) {
// right arrow
const nextsibling = start.nextElementSibling;
changeStyle(nextsibling);
}
}
document.onkeydown = checkKey;
}

Answer 1

我相信它会对你有帮助的。移动键是[alt] + [shift] +[方向键]。

const myTable = document.querySelector('#my-Table tbody')
, nbRows  = myTable.rows.length
, nbCells = myTable.rows[0].cells.length
, movKey  = { ArrowUp    : p=>{ p.r = (--p.r +nbRows ) % nbRows  }
, ArrowLeft  : p=>{ p.c = (--p.c +nbCells) % nbCells }
, ArrowDown  : p=>{ p.r = ++p.r % nbRows  }
, ArrowRight : p=>{ p.c = ++p.c % nbCells }
}
// get On Focus event on Table elements
myTable
.querySelectorAll('input, [contenteditable=true]')
.forEach(elm=>{elm.onfocus=e=>
{
let sPos  = myTable.querySelector('.select')
, tdPos = elm.parentNode
if (sPos) sPos.classList.remove('select')
tdPos.classList.add('select')
}
})

document.onkeydown=e=>
{
let sPos = myTable.querySelector('.select')
, evt  = (e==null ? event:e)
, pos  = { r: sPos?sPos.parentNode.rowIndex:-1
, c: sPos?sPos.cellIndex:-1
}
if ( sPos                 // previous pos focus exist...
&& evt.altKey
&& evt.shiftKey         // addin shift to control
&& movKey[evt.code] )   // evt.ctrlKey... ?
{
let loop    = true
, nxFocus = null
, cell    = null
do
{
movKey[evt.code](pos)
cell    = myTable.rows[pos.r].cells[pos.c]                    // possible <td> for new focus...
nxFocus = cell.querySelector('input, [contenteditable=true]') // get focussable element of <td>
if ( nxFocus 
&& cell.style.display!=='none' 
&& cell.parentNode.style.display!=='none')
{
nxFocus.focus()
loop = false
}
}
while (loop)
}
}

#my-Table {
border-collapse: collapse;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 14px;
}
#my-Table td {
min-width:20px;
text-align: center;
border: 1px solid grey;
padding: 2px 5px;
white-space: nowrap;
}
.select { background-color: aqua } /* just for the control, delete this line when commissioning the operation */

<table id="my-Table">
<tbody>
<tr>
<td><input placeholder="r0, c0"></td>
<td><div contenteditable="true">Content Editable 1 r0, c1</div></td>
<td style="display: none;"><input placeholder="r0, c2"></td>
<td><div contenteditable="true">Content Editable 2 r0, c3</div></td>
<td><input placeholder="r0, c4"></td>
<td>Not Editable</td>
</tr>
<tr style="display: none;">
<td><input placeholder="r1, c1"></td><td><div contenteditable=" true">Content Editable 1</div></td>
<td style="display: none;"><input value="Input 2"></td>
<td><div contenteditable="true">Content Editable 2</div></td>
<td><input value="Input 3"></td>
<td>Not Editable</td>
</tr>
<tr>
<td><input  placeholder="r2, c0"></td>
<td><div contenteditable="true">Content Editable 1</div></td>
<td style="display: none;"><input value="Input 2"></td>
<td><div contenteditable="true">Content Editable 2</div></td>
<td><input value="Input 3"></td>
<td>Not Editable</td>
</tr>
<tr>
<td><input value="Input 1"></td>
<td><div contenteditable="true">Content Editable 1</div></td>
<td style="display: none;"><input value="Input 2"></td>
<td><div contenteditable="true">Content Editable 2</div></td>
<td><input value="Input 3"></td>
<td>Not Editable</td>
</tr>
</tbody>
</table>