将焦点设置在第二个表上。

Question

我想像处理第一个表格一样处理第二个表格，但是我无法将焦点设置到第二个表格。

(function ($) {
  $.fn.formNavigation = function () {
    $(this).each(function () {

      $(this).find('input').on('keydown', function(e) {

        if (e.which === 13 && !e.shiftKey) {
          if ($(this).closest('td').next().find('input').length>0) {
            e.preventDefault();
            $(this).closest('td').next().find('input').focus();
          } else if ($(this).closest('tr').next().children().eq(1).find('input').length>0) {
            e.preventDefault();
            $(this).closest('tr').next().children().eq(0).find('input').focus();

          } else if ($(this).siblings('table')) {
            //$(this).closest('table').find('tr').children().eq($(this).closest('td').index()).find('input').focus();
          }
        } 
      });
    });
  };
})(jQuery);

$('.gridexample').formNavigation();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="gridexample">
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
    </tr>
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
    </tr>
</table>
<table class="gridexample">
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
    </tr>
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
    </tr>
</table>

有没有办法将焦点设置在第二个表格上？->tr->td

- Darpan Patel

---

你想将焦点设置在第二个表格的第一个文本框中吗？ - Prashant Zombade

是的。 - Darpan Patel

好的，您想在页面加载时还是在特定事件上执行该操作？ - Prashant Zombade

如果您为表格指定了自己的ID或类，那么您可以直接选择该表格。例如：let table2 = document.getElementById("table2");（在您的HTML中，<table id="table2" class="gridexample">）。一旦您在脚本中确定了所需的表格元素，您的相同jQuery代码应该能够正确找到输入框（因为两个表格的结构是相同的）。 - Cat

@Prashant Zombade，不要紧。我只需要你的解决方案。无论你采用什么方式。 - Darpan Patel

Answer 1

操作jQuery集合

看起来您想让enter/return键像tab键一样工作？如果是这样，那么将标签作为一个 jQuery 集合（即 $('input')），并绑定到顶级祖先标签——所有标签在集合内共享的祖先标签（即 $('table')）。扩展已被修改，以便您可以传递任何选择器作为祖先和集合参数，因此现在您可以针对任何东西而不仅仅是input。

Demo 1 是 OP 问题所需的设置——一个在 table 中的 input。

Demo 2 是一个混合集合的设置——在一个 form 中有 textarea 和 select。

Demo 1

(function($) {
  $.fn.enterNav = function(collection) {
    $(collection).on('keydown', function(e) {
      var idx = $(this).index(collection);
      if (e.which === 13 && !e.shiftKey) {
        $(collection).eq(idx + 1).focus();
      }
    });
  }
})(jQuery);

// $(ancestor).enterNav(collection)

$('table').enterNav('input');

<table>
  <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
</table>
<hr>
<table>
  <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

---

演示 2

(function($) {
  $.fn.enterNav = function(collection) {
    $(collection).on('keydown', function(e) {
      var idx = $(this).index(collection);
      if (e.which === 13 && !e.shiftKey) {
        $(collection).eq(idx + 1).focus();
      }
    });
  }
})(jQuery);

// $(ancestor).enterNav(collection)

$('form').enterNav('textarea, select');

<form>
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
  <select>
    <option>Looks</option>
    <option>like</option>
    <option>it</option>
  </select>
  <select>
    <option>works</option>
    <option>OK</option>
    <option>?</option>
  </select>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

- zer00ne

---

还有一个问题，如果我使用文本区域或下拉框，它不起作用。有什么解决办法吗？ - Darpan Patel

嗨@DarpanPatel，我可能需要更多信息，比如所有目标共同拥有的祖先。我已经添加了另一个演示，其中包含表单中的文本区域和选择器，并且它可以正常工作。 - zer00ne

这正是我所需要的，谢谢。 - Darpan Patel

没问题，很高兴能帮忙。 - zer00ne

Answer 2

这里没有jQuery，只使用普通的js就可以搞定。根据您在上面评论中的请求，焦点集中在第二个表格中的第一条目录上。请注意，不需要任何额外的类或id规范。

// Target last table in the group
tables = document.getElementsByClassName('gridexample');
targetTable = tables[tables.length - 1];

// Target first row of the last table
tableRows = targetTable.getElementsByTagName('tr');
targetRow = tableRows[0];

// Target first entry of the first row of the last table
rowEntries = targetRow.getElementsByTagName('td');
targetEntry = rowEntries[0];

// Get the input field and set focus
targetEntry.getElementsByTagName('input')[0].focus();

<table class="gridexample">
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
    </tr>
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
    </tr>
</table>
<table class="gridexample">
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
    </tr>
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
    </tr>
</table>

- Andrew