jQuery next Input in table

Question

I have a series of input and select elements in a table:

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

I want Carriage Return to behave like a Tab, moving to the next field.

I have:

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

I know that the node structure is too complex for $(this).next().focus(); to work, but what combination of parent(), next(), find() do I need for this to work?

I HAVE tried various combinations many times, before just asking here!!

Answer 1

One way to solve this is by adding common class to all input/select fields. Then, using .index() get the index of class which is been focus and use :eq() to focus next field with same class.

Demo Code :

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