javascript-将焦点放在第二张桌子上

我想像处理第一张桌子一样专注于第二张桌子,但是我无法专注于第二张桌子.

(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

最佳答案

操纵jQuery Collection

看起来您希望Enter / Return键像Tab键一样工作？如果是这样,则将标签定位为jQuery集合(即$(‘input’)),然后绑定到顶级祖先标签-集合中所有标签共享的祖先(即$(‘table’) ).扩展名已修改,因此您可以传入祖先和集合参数的任何选择器,因此现在您可以定位任何对象,而不仅仅是输入.

演示1是OP问题中所需的设置-在表中输入.

演示2设置了一个混合集合-textarea,并以表格形式进行选择.

演示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>

原文链接：https://www.f2er.com/html/530396.html

javascript-将焦点放在第二张桌子上

猜你在找的HTML相关文章