Как данные редактируемых ячеек таблицы html будут выбираться при перемещении из одной ячейки в другую с помощью клавиши Tab

Question

Я просто хочу, чтобы данные следующей ячейки выбирались, когда я перехожу из одной ячейки в другую, нажимая Tab. Предположим, я перехожу из ячейки с именем в ячейку с фамилией, тогда данные ячейки с фамилией будут выбраны автоматически. Ниже я привел свой код и изображение моей потребности. Пожалуйста, помогите мне решить проблему.

$(document).ready(function() {

  $("#btn").click(function() {
    var ary = [];
    $(function() {
      $('#tbl tbody tr').each(function(a, b) {
        var id = $('.id', b).text();
        var fname = $('.fname', b).text();
        var lname = $('.lname', b).text();
        var email = $('.email', b).text();
        ary.push({
          ID: id,
          fname: fname,
          lname: lname,
          email: email
        });

      });

      alert(JSON.stringify(ary));

    });

  });

});

.tdstyle {
  background: white;
  color: #060606;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>




<div class="container">
  <h2>Editable Table</h2>
  <table id="tbl" class="table table-bordered table-responsive-md table-striped text-left">
    <thead>
      <tr>
        <th>ID</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>

      <tr>
        <td class="id">101</td>
        <td contenteditable class="tdstyle fname">John</td>
        <td contenteditable class="tdstyle lname">Doe</td>
        <td contenteditable class="tdstyle email">john@example.com</td>
      </tr>

      <tr>
        <td class="id">102</td>
        <td contenteditable class="tdstyle fname">Mary</td>
        <td contenteditable class="tdstyle lname">Moe</td>
        <td contenteditable class="tdstyle email">mary@example.com</td>
      </tr>

      <tr>
        <td class="id">103</td>
        <td contenteditable class="tdstyle fname">July</td>
        <td contenteditable class="tdstyle lname">Dooley</td>
        <td contenteditable class="tdstyle email">july@example.com</td>
      </tr>

    </tbody>
  </table>

  <input type="submit" class="btn btn-success btn-block" id="btn" value="Show Edit data">

</div>

Моя потребность представлена ​​на следующем изображении.

Answer 1

Используйте это (здесь { ссылка }):

function selectText(event) {
  node = event.target;

  if (document.body.createTextRange) {
    const range = document.body.createTextRange();
    range.moveToElementText(node);
    range.select();
  } else if (window.getSelection) {
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNodeContents(node);
    selection.removeAllRanges();
    selection.addRange(range);
  } else {
    console.warn("Could not select text in node: Unsupported browser.");
  }
}

И активируйте его при фокусе (это также будет отмечать весь текст при щелчке):

$("td[contenteditable]").focus(selectText);