JavaScript利用键盘方向键（上下键）控制表格行选中

可以使用以下代码实现：

// 获取表格元素
var table = document.getElementById('table');

// 获取表格行数和当前选中行索引
var rows = table.rows.length;
var index = 0;

// 监听键盘事件
document.onkeydown = function(e) {
  // 判断按下的键是否为上下箭头
  if (e.keyCode === 38 || e.keyCode === 40) {
    // 取消当前选中行样式
    table.rows[index].style.backgroundColor = '';
    // 更新选中行索引
    if (e.keyCode === 38) { // 上箭头
      index = (index === 0) ? rows - 1 : index - 1;
    } else { // 下箭头
      index = (index === rows - 1) ? 0 : index + 1;
    }
    // 给选中行添加样式
    table.rows[index].style.backgroundColor = 'yellow';
  }
};

此代码监听键盘按下事件，如果按下的是上下箭头，则取消当前选中行的样式，根据上下箭头更新选中行索引，并给新选中行添加样式。注意要在HTML标签中给表格添加id属性，并将id值传给`getElementById()`方法。

相关问题

jqgrid实现 方向键上下移动控制选中行

您可以通过监听键盘事件来实现使用方向键上下移动控制选中行的功能。下面是一个示例代码：

$(document).keydown(function(e){
    var selectedRowId = $("#grid").jqGrid('getGridParam', 'selrow');
    var rowCount = $("#grid").jqGrid('getGridParam', 'reccount');
    
    if (selectedRowId) {
        switch(e.keyCode) {
            case 38: // 上箭头
                if (selectedRowId > 1) {
                    $("#grid").jqGrid('setSelection', selectedRowId - 1);
                }
                break;
            case 40: // 下箭头
                if (selectedRowId < rowCount) {
                    $("#grid").jqGrid('setSelection', selectedRowId + 1);
                }
                break;
        }
    }
});

在上述代码中，我们使用 `keydown` 事件来监听键盘按下的动作。然后，我们获取当前选中行的行号和总行数，根据按下的方向键来判断应该移动到哪一行，并使用 `setSelection` 方法来设置选中行。

请确保将代码中的 `"#grid"` 替换为您实际使用的 jqGrid 表格的选择器。另外，该代码片段假设您已经正确地初始化了 jqGrid，并且表格已经加载了数据。

前端实现上下左右方向键控制

在前端实现上下左右方向键控制，可以通过监听`keydown`事件来实现。具体步骤如下：

1. 给需要控制的元素添加`tabindex`属性，让其可以获取焦点。
2. 给该元素绑定`keydown`事件，监听方向键的按下。
3. 在`keydown`事件处理函数中，根据按下的方向键修改元素的位置或状态。
4. 需要注意的是，在处理方向键时，要阻止浏览器默认的滚动行为。

以下是一个简单的示例代码，实现了通过方向键控制一个小方块的上下左右移动：

<div id="box" tabindex="0"></div>

#box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
}

const box = document.getElementById('box');
const step = 10;

box.addEventListener('keydown', e => {
  switch (e.keyCode) {
    case 37: // 左箭头
      e.preventDefault(); // 阻止默认行为
      box.style.left = `${parseInt(box.style.left) - step}px`; // 修改位置
      break;
    case 38: // 上箭头
      e.preventDefault();
      box.style.top = `${parseInt(box.style.top) - step}px`;
      break;
    case 39: // 右箭头
      e.preventDefault();
      box.style.left = `${parseInt(box.style.left) + step}px`;
      break;
    case 40: // 下箭头
      e.preventDefault();
      box.style.top = `${parseInt(box.style.top) + step}px`;
      break;
  }
});

在这个示例中，我们首先给小方块添加了`tabindex`属性，让其可以获取焦点。然后，在`keydown`事件处理函数中，我们根据按下的方向键修改小方块的位置，同时阻止了浏览器的默认滚动行为。