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>
            <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>
            <option>Пункт 1</option>
            <option>Пункт 2</option>
          </select>
        </td>
        <td id="4_3">
          <input type="text">
        </td>
        <td id="4_4">
          <select>
            <option>Пункт...

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) {
        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();
        return false;
      } 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();
          return false;
        }
      } else if (event.which == 13) {
        if ($(this).is('input')) {
          if (isTextSelected(this) == false) {
            this.select();
          } else {
            var end = this.value.length;
            this.setSelectionRange(end,...