У меня есть таблица 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>
0
Paul Taylor 13 Мар 2018 в 14:03

2 ответа

Лучший ответ

Теперь у меня это работает

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/

0
Paul Taylor 28 Мар 2018 в 17:42

Решение, где я пытался сделать 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 = id таблицы html.

0
Yash 5 Авг 2019 в 11:37