使用jquery在表中进行箭头键导航
我有一个应用程序,其中我使用箭头键在表格单元格之间导航。我这里有个问题 1) 若焦点位于第一行的第一个单元格中,按左键将使焦点不可见 2) 若焦点位于最后一行的最后一个单元格中,按右键使焦点不可见 如果单元格是第一行的第一个单元格(按左键时),并且与最后一行的最后一个单元格相同(按右键时),如何使焦点保持在同一单元格中 以下是代码:使用jquery在表中进行箭头键导航,jquery,Jquery,我有一个应用程序,其中我使用箭头键在表格单元格之间导航。我这里有个问题 1) 若焦点位于第一行的第一个单元格中,按左键将使焦点不可见 2) 若焦点位于最后一行的最后一个单元格中,按右键使焦点不可见 如果单元格是第一行的第一个单元格(按左键时),并且与最后一行的最后一个单元格相同(按右键时),如何使焦点保持在同一单元格中 以下是代码: switch(e.keyCode) { case 37: // Left button = cell.prev(
switch(e.keyCode)
{
case 37:
// Left
button = cell.prev('td').find('button');
if (button.length == 0)
{
// Nothing further left, go to end of
// previous row
button = cell.parent('tr').prev('tr').find('td:last button');
}
break;
case 38:
// Up
row = cell.parent('tr');
index = row.children('td').index(cell);
button = row.prev('tr').find('td:eq(' + index + ') button').length === 0 ? row.find('td:eq(' + index + ') button') : row.prev('tr').find('td:eq(' + index + ') button');
break;
case 39:
// Right
button = cell.next('td').find('button');
if (button.length == 0)
{
// Nothing further right, go to beginning of
// next row
button = cell.parent('tr').next('tr').find('td:first button');
}
break;
case 40:
// Down
row = cell.parent('tr');
index = row.children('td').index(cell);
button = row.next('tr').find('td:eq(' + index + ') button').length === 0 ? row.find('td:eq(' + index + ') button') : row.next('tr').find('td:eq(' + index + ') button');;
break;
}
如果没有更多的代码就很难判断,但是如果没有找到下一个/上一个按钮,那么要留在当前单元格中,您只需在
switch
语句后添加以下代码即可:
if (button.length == 0) button = cell.find('button');