Question

我有一个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>

更新

我正在检测到按键，但是遇到了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>

Answer 1

我现在有了它的工作

<强> 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>

<强>的Javascript

document.onkeydown =
  function updownintable(e) {
    switch (e.key) {
      case 'ArrowUp':
        var el = document.activeElement;
        var rowNo = el.id.substring(0, el.id.indexOf("_"));
        var fieldId = el.id.substring(el.id.indexOf("_"));
        if (rowNo > 1) {
          rowNo--;
          var newId = rowNo + fieldId;
          var newEl = document.getElementById(newId);
          if (newEl != null) {
            newEl.focus();
          }
        }
        break;
      case 'ArrowDown':
        var el = document.activeElement;
        var rowNo = el.id.substring(0, el.id.indexOf("_"));
        var fieldId = el.id.substring(el.id.indexOf("_"));
        rowNo++
        var newId = rowNo + fieldId;
        var newEl = document.getElementById(newId);
        if (newEl != null) {
          newEl.focus();
        }
        break;
    }
  };

https://jsfiddle.net/paultaylor/480Ln4y6/1/

Answer 2

解决方案，在哪里我试图使JS简单？

$data = '{
  "normal_size": [
    {
      "id": 1,
      "image": "MICMIMC30651-6.jpg",
      "url": "http://localhost:8000/images/product/preview/MICMIMC30651-6.jpg"
    },
    {
      "id": 2,
      "image": "MICMIMC30651-61.jpg",
      "url": "http://localhost:8000/images/product/preview/MICMIMC30651-61.jpg"
    },
    {
      "id": 3,
      "image": "MICMIMC30651-62.jpg",
      "url": "http://localhost:8000/images/product/preview/MICMIMC30651-62.jpg"
    },
    {
      "id": 4,
      "image": "MICMIMC30651-63.jpg",
      "url": "http://localhost:8000/images/product/preview/MICMIMC30651-63.jpg"
    }
  ]
}';

$output = json_encode(['image' => json_decode($data, true)]);

echo $output;

其中tableElementId = html表的ID。

配置向上/向下箭头在html表

2 个答案: