jQuery next 在表中输入

Question

我在表格中有一系列输入和选择元素：

    <table id='tbl-edit-company' class='tbl-form tbl-contact-form'>   
      <tbody>
        <tr>
          <td><label for='edit-company-company-name'>Company Name</label></td>
          <td><input id='edit-company-company-name' class='contact-input' name='edit-company-company-name' type='textbox' maxlength='50' value=''></td>
        </tr>  
        <tr>
          <td><label for='cmbo-edit-company-business-type'>Business Type</label></td>
          <td>
            <select id='cmbo-edit-company-business-type' class='contact-combo' name='cmbo-edit-company-business-type'>
            <option value='0'> - </option>
            <option value='1'>Construction</option>
            <option value='2'>Garage</option>
            <option value='3'>Financial</option>
            <select>
          </td>
        </tr>
        <tr>
          <td><label for='edit-company-branch-name'>Branch</label></td>
          <td><input id='edit-company-branch-name' class='contact-input' name='edit-company-branch-name' type='textbox' maxlength='20'><div id='found-branches'></div></td>
        </tr>     
        <tr>
          <td><label for='edit-company-phone'>Phone Number</label></td>
          <td><input id='edit-company-phone' class='phone-input' name='edit-company-phone' type='textbox' maxlength='20'></td>
        </tr>    
        <tr>
          <td><label for='edit-company-email'>Email</label></td>
          <td><input id='edit-company-email' class='email-input' name='edit-company-email' type='textbox' maxlength='50'></td>
        </tr>
      </tbody>
    </table>

我希望回车符表现得像制表符一样，移动到下一个字段。

我有：

    $('#tbl-edit-company tbody').on('keydown', 'input, select',  function(e) {
      if (e.keyCode == 13) {
        event.preventDefault();
        $(this).next().focus();
      }  
    });

我知道节点结构对于 $(this).next().focus(); 来说太复杂了；工作，但是我需要什么parent()、next()、find()组合才能工作？

我已经多次尝试过各种组合，才来这里问！！

Answer 1

解决此问题的一种方法是向所有

input/select

字段添加公共类。然后，使用 .index() 获取正在聚焦的类的索引，并使用

:eq()

聚焦具有相同类的下一个字段。

演示代码：

$('#tbl-edit-company tbody').find('input,select').addClass('something'); //adding this class... to all input/select
$('#tbl-edit-company tbody').on('keydown', 'input, select', function(e) {
  var index_ = $('.something').index(this) //get index of class

  if (e.keyCode == 13) {
    $('#tbl-edit-company tbody').find(`.something:eq(${index_ + 1})`).focus(); //focus on next class + 1
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='tbl-edit-company' class='tbl-form tbl-contact-form'>
  <tbody>
    <tr>
      <td><label for='edit-company-company-name'>Company Name</label></td>
      <td><input id='edit-company-company-name' class='contact-input' name='edit-company-company-name' type='textbox' maxlength='50' value=''></td>
    </tr>
    <tr>
      <td><label for='cmbo-edit-company-business-type'>Business Type</label></td>
      <td>
        <select id='cmbo-edit-company-business-type' class='contact-combo' name='cmbo-edit-company-business-type'>
          <option value='0'> - </option>
          <option value='1'>Construction</option>
          <option value='2'>Garage</option>
          <option value='3'>Financial</option>
          <select>
      </td>
    </tr>
    <tr>
      <td><label for='edit-company-branch-name'>Branch</label></td>
      <td><input id='edit-company-branch-name' class='contact-input' name='edit-company-branch-name' type='textbox' maxlength='20'>
        <div id='found-branches'></div>
      </td>
    </tr>
    <tr>
      <td><label for='edit-company-phone'>Phone Number</label></td>
      <td><input id='edit-company-phone' class='phone-input' name='edit-company-phone' type='textbox' maxlength='20'></td>
    </tr>
    <tr>
      <td><label for='edit-company-email'>Email</label></td>
      <td><input id='edit-company-email' class='email-input' name='edit-company-email' type='textbox' maxlength='50'></td>
    </tr>
  </tbody>
</table>