JSFiddle - React, Tailwind, and code Playground

by mkukushkin

HTML

<form>
  <table>
    <tbody><tr>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Отчество</th>
      <th>E-mail</th>
    </tr>
    <tr>
      <td id="1_0"><input type="text" value="1" readonly size="1"></td>
      <td id="1_1"><input type="text"></td>
      <td id="1_2"><input type="text" value="123456" readonly></td>
      <td id="1_3"><input type="text"></td>
      <td id="1_4"><input type="text"></td>
    </tr>
    <tr>
      <td id="2_0"><input type="text" value="2" readonly  size="1"></td>
      <td id="2_1"><input type="text" value="22" readonly></td>
      <td id="2_2"><input type="text" value="12345678"></td>
      <td id="2_3"><input type="text"></td>
      <td id="2_4"><input type="text"></td>
    </tr>
    <tr>
      <td id="3_0"><input type="text" value="3" readonly  size="1"></td>
      <td id="3_1"><input type="text"></td>
      <td id="3_2"><input type="text"></td>
      <td id="3_3"><select size="1" onclick="this.size=1">
          <option>Пункт 1</option>
          <option>Пункт 2</option>
           <option>Пункт 3</option>
            <option>Пункт 4</option>
             <option>Пункт 5</option>
        </select></td>
      <td id="3_4"><input type="text"></td>
    </tr>
    <tr>
      <td id="4_0"><input type="text" value="4" readonly></td>
      <td id="4_1"><input type="text"></td>
      <td id="4_2"><select size="1" onclick="this.size=1">
          <option>Пункт 1</option>
          <option>Пункт 2</option>
        </select></td>
      <td id="4_3"><input type="text"></td>
      <td id="4_4"><select size="1" onclick="this.size=1">
          <option>Пункт 1</option>
          <option>Пункт 2</option>
                     <option>Пункт 3</option>
            <option>Пункт 4</option>
             <option>Пункт 5</option>
        </select></td>
    </tr>
  </tbody></table>
</form>

CSS

input[readonly] { border: none; background: none; font-weight: bold;}
td {text-align: center;}

JavaScript

$(document).ready( function () {
      getCursorPosition = function(input) {
        var input = input.get(0);
        if (!input) return; // No (input) element found
        if ('selectionStart' in input) {
          // Standard-compliant browsers
          return input.selectionStart;
        } else if (document.selection) {
          // IE
          input.focus();
          var sel = document.selection.createRange();
          var selLen = document.selection.createRange().text.length;
          sel.moveStart('character', -input.value.length);
          return sel.text.length - selLen;
        }
      }
      $('input, select').keydown( function (event) {
        //if (event.which == 38 || event.which == 40) event.preventDefault();
        var id = $(this).parent().attr('id').split('_');
        if (event.which == 38 || event.which == 40) { 
          if (($(this).is('select') && this.size==1) || $(this).is('input') ) {
          var new_id = (parseInt(id[0]) + event.which - 39).toString() + '_' + id[1];
          if ($('#' + new_id).find('input').length != 0)
            $('#' + new_id).find('input').focus().select();
          else
            $('#' + new_id).find('select').focus().select();
          event.preventDefault();
          }
        }
        else if (event.which == 39 || event.which == 37) {
          var cursor_position = getCursorPosition($(this));
          //alert (isTextSelected($("#inp1_2")));
          if (isTextSelected($(this)[0]) ==true || $(this).is('select') || $(this).val() == '') {
            var new_id = id[0] + '_' + (parseInt(id[1]) + event.which - 38).toString();
            if ($('#' + new_id).find('input').length != 0)
              $('#' + new_id).find('input').focus().select();
            else
              $('#' + new_id).find('select').focus().select();
            event.preventDefault();
          
          }
        }
        else if (event.which == 13) {
          if ($(this).is('input')) {
            if...