配置向上/向下箭头以在html表中向上/向下移动行

我有一个html表格，按TAB键移动到行中的下一个元素，SHIFT-TAB键返回一个元素，这很好，因此我不想修改tabindex属性来更改它

但我也希望用户能够使用箭头键上下遍历表，我如何实现这一点

我正在使用Html5和一些Javascript和CSS

<table class="edittable">
<tr>
  <th class="tableheading verysmallinputfield" style="position:relative">
      <label>
          #
      </label>
  </th>
  <th class="tableheading smallinputfield" style="position:relative">
      <label>
          Disc No
      </label>
  </th>
  <th class="tableheading smallinputfield" style="position:relative">
      <label>
          Disc Total
      </label>
  </th>
  <th class="tableheading largeinputfield" style="position:relative">
      <label>
          Disc Subtitle
      </label>
  </th>
</tr>
<tr>
  <td class="tableheading">
      1
  </td>
  <td>
      <input name="1DISC_NO" value="01" style="width:100%" type="number" min="1" max="999">
  </td>
  <td>
      <input name="1DISC_TOTAL" value="01" style="width:100%" type="number" min="1" max="999">
  </td>
  <td>
      <input name="1DISC_SUBTITLE" value="" style="width:100%" type="text">
  </td>
</tr>
<tr>
  <td class="tableheading">
      2
  </td>
  <td>
      <input name="2DISC_NO" value="01" style="width:100%" type="number" min="1" max="999">
  </td>
  <td>
      <input name="2DISC_TOTAL" value="01" style="width:100%" type="number" min="1" max="999">
  </td>
  <td>
      <input name="2DISC_SUBTITLE" value="" style="width:100%" type="text">
  </td>
</tr>
</table>

#
光盘编号
磁盘总数
光盘字幕
1.
2.

更新

我检测到按键，但activeElement有问题。元素已定义，但当我尝试获取标记名或父标记名时，它总是未定义，不明白为什么

<script>
            document.onkeydown = function (e) {
    switch (e.key) {
        case 'ArrowUp':
            var el = document.activeElement;
            alert($(el)); 
            alert($(el).tagName); 
            alert($(el).closest('td').innerHtml); 
            break;
        case 'ArrowDown':
            var el = document.activeElement;
            alert($(el).closest('td').innerHtml); 
            break;
    }
};
        </script>

document.onkeydown=函数（e）{
开关（电子钥匙）{
案例“ArrowUp”：
var el=document.activeElement；
警报（$（el））；
警报（$（el）.tagName）；
警报（$（el）.closest（'td'）.innerHtml）；
打破
案例“箭头向下”：
var el=document.activeElement；
警报（$（el）.closest（'td'）.innerHtml）；
打破
}
};

我现在可以用了

Html：

   <table class="edittable" id="menu_disctable">
      <tr>
        <th class="tableheading verysmallinputfield" style="position:relative">
          <label>
                                            #
                                        </label>
        </th>
        <th class="tableheading smallinputfield" style="position:relative">
          <label>
                                            Disc No
                                        </label>
        </th>
        <th class="tableheading smallinputfield" style="position:relative">
          <label>
                                            Disc Total
                                        </label>
        </th>
        <th class="tableheading largeinputfield" style="position:relative">
          <label>
                                            Disc Subtitle
                                        </label>
        </th>
      </tr>
      <tr id="menu_disc1">
        <td class="tableheading">
          1
        </td>
        <td>
          <input name="1_DISC_NO" id="1_DISC_NO" value="01" style="width:100%" type="number" min="1" max="999">
        </td>
        <td>
          <input name="1_DISC_TOTAL" id="1_DISC_TOTAL" value="01" style="width:100%" type="number" min="1" max="999">
        </td>
        <td>
          <input name="1_DISC_SUBTITLE" id="1_DISC_SUBTITLE" value="" style="width:100%" type="text">
        </td>
      </tr>
      <tr id="menu_disc2">
        <td class="tableheading">
          2
        </td>
        <td>
          <input name="2_DISC_NO" id="2_DISC_NO" value="01" style="width:100%" type="number" min="1" max="999">
        </td>
        <td>
          <input name="2_DISC_TOTAL" id="2_DISC_TOTAL" value="01" style="width:100%" type="number" min="1" max="999">
        </td>
        <td>
          <input name="2_DISC_SUBTITLE" id="2_DISC_SUBTITLE" value="" style="width:100%" type="text">
        </td>
      </tr>
    </table>

---

解决方案，我试图让JS保持简单

document.onkeydown =
  function updownintable(e) {
    var el = document.activeElement;
    var rowNo = el.parentNode.parentNode.rowIndex;
    var columnNo = el.parentNode.cellIndex;
    var bodyElement = document.getElementById(tableElementId).children[0];

    switch (e.key) {
      case 'ArrowUp':
        rowNo--;
        break;
      case 'ArrowDown':
        rowNo++;
        break;
      case 'ArrowLeft':
        columnNo--;
        break;
      case 'ArrowRight':
        columnNo++;
        break;
    }
    bodyElement.children[rowNo].children[columnNo].children[0].focus();
};

---

其中tableElementId=html表格的id。

您能提供一些代码吗？一些例子？不太清楚您在表格中上移/下移一行是什么意思。是否应该突出显示当前行？它会改变它的背景吗？请再详细一点。谢谢@N.Ivanov不，只需更改焦点，例如用户当前处于tr1，td3，如果他按下按钮，现在应该处于tr2，td3。我没有明确说明的是，每个td都包含一个输入字段。使用jQuery是可行的。我假设您为箭头按下放置事件处理程序，然后根据焦点上的内容，根据所需的方向移动。例如，如果您在第1列第3列，并且希望转到第2列第3列，那么在jQuery中，您将获得下一个，然后是适当的，并且只需将焦点设置为该列。我希望这有帮助！好吧，我试试看，thanks@N.Ivanov正如它所帮助的那样，只是重新定义了一个普通的el元素，然后像引用JQuery元素一样引用它，所以我需要使用JQuery来获取activeElement

document.onkeydown =
  function updownintable(e) {
    var el = document.activeElement;
    var rowNo = el.parentNode.parentNode.rowIndex;
    var columnNo = el.parentNode.cellIndex;
    var bodyElement = document.getElementById(tableElementId).children[0];

    switch (e.key) {
      case 'ArrowUp':
        rowNo--;
        break;
      case 'ArrowDown':
        rowNo++;
        break;
      case 'ArrowLeft':
        columnNo--;
        break;
      case 'ArrowRight':
        columnNo++;
        break;
    }
    bodyElement.children[rowNo].children[columnNo].children[0].focus();
};