jQuery next 表中的输入-解网

问：

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

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

我希望 Carriage Return 的行为类似于 Tab，移动到下一个字段。

我有：

    $('#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（）的什么组合才能工作？

我已经尝试了很多次各种组合，然后才在这里问！！

jquery 选项卡 jquery-selectors 回车

$('#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>

上一个：获取在jQuery中选择非空值的<select>元素

下一个：使用 JQuery ：nth-child（n）选择器定位属于特定类的子元素

jQuery next 表中的输入

jQuery next Input in table

评论