0

I just want to do the next cell data will be selected when I move from one cell to another cell by pressing Tab. Suppose I move from Firstname cell to Lastname cell, Then Lastname cell data will be selected automatically. In the following I have given my code and my need's image.Please help me to solve the problem. 

$(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>

My need is given in the following image.

enter image description here

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
Riyad
  • 111
  • 1
  • 5
  • Not sure i understand the question, the tab keys takes you to the next editable cell untill the last in the row (tr), then down to next row first editable td . is that wrong ? – G-Cyrillus May 29 '20 at 17:09
  • Does this answer your question? [Programmatically select text in a contenteditable HTML element?](https://stackoverflow.com/questions/6139107/programmatically-select-text-in-a-contenteditable-html-element) – kmoser May 29 '20 at 17:16
  • Thank you G-Cyrillus. I think you understand my question. It does not need to see the jquery function. Just see html table. When I press tab key form john@example.com then cursor will go to Mary and Mary will be selected automatically. – Riyad May 29 '20 at 17:40

1 Answers1

1

Use this (found here https://stackoverflow.com/a/987376/9487478): 

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.");
  }
}

And trigger it on focus (this will also mark all the text on click):

$("td[contenteditable]").focus(selectText);
Paul
  • 2,086
  • 1
  • 8
  • 16