html表格如何'；当使用Tab键从一个单元格移动到另一个单元格时，将选择可编辑的单元格数据

当我按Tab键从一个单元格移动到另一个单元格时，将选择下一个单元格数据。假设我从Firstname单元格移动到Lastname单元格，则将自动选择Lastname单元格数据。在下面我已经给出了我的代码和我需要的图片。请帮我解决这个问题

$（文档）.ready（函数（）{
$（“#btn”）。单击（函数（）{
var ary=[]；
$（函数（）{
$（'#tbl tbody tr'）。每个（函数（a，b）{
var id=$（'.id'，b）.text（）；
var fname=$（'.fname'，b）.text（）；
var lname=$（'.lname'，b）.text（）；
var email=$（'.email'，b）.text（）；
推({
ID:ID，
fname:fname，
lname:lname，
电邮：电邮
});
});
警报（JSON.stringify（ari））；
});
});
});
.tdstyle{
背景：白色；
颜色：#0606；
}

可编辑表
身份证件
名字
姓氏
电子邮件
101
约翰
雌鹿
john@example.com
102
玛丽
教育部
mary@example.com
103
七月
杜利
july@example.com
使用此选项（可在此处找到）：

并在焦点上触发它（这也会在单击时标记所有文本）：

我不确定我是否理解这个问题，tab键会将您带到下一个可编辑的单元格，直到行中的最后一个单元格（tr），然后向下移动到下一行第一个可编辑的单元格。错了吗？这回答了你的问题吗？谢谢你，G-Cyrillus。我想你理解我的问题。它不需要查看jquery函数。请看html表格。当我按tab键时，表单john@example.com然后光标将转到Mary，Mary将被自动选择。
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);