Set focus on the second table

问题: I want to focus on the second table in the same way I did with the first table but I couldn't set focus on the second table. (function ($) { $.fn.formNaviga...

问题:

I want to focus on the second table in the same way I did with the first table but I couldn't set focus on the second table.

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

Is there any way to set focus on the second table? ->tr->td


回答1:

Manipulate the jQuery Collection

It looks like you want the enter/return key to act like a tab key? If so then, then target the tags as a jQuery Collection (i.e. $('input')) and just bind to the top ancestor tag -- an ancestor that is shared by all tags within the collection (i.e. $('table')). The extension has been modified so that you can pass in any selector for ancestor and collection parameters, so now you can target anything rather than just input.

Demo 1 is the setup required in OP question -- input in a table.

Demo 2 is setup with a mixed collection -- textarea and select in a form.

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>


Demo 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>


回答2:

No jQuery here, just plain old js does the trick. As per your request in the comments above, focus is set on the first entry in the second table. Note that no additional class or id specifications are necessary for this.

// 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>

  • 发表于 2019-01-22 11:43
  • 阅读 ( 275 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除