Setzen Sie den Fokus auf das nächste Eingabefeld in einer Tabelle

Question

Ich möchte die nächste Eingabe in einem Tabellenfeld durch Drücken von enter fokussieren. Die Tabelle sieht wie folgt aus:

<table> 
    <tbody> 
     <tr> 
      <td>Title 1</td> 
      <td><input type="number"></td> 
      <td>Unit</td> 
     </tr> 
     <tr> 
      <td>Title 2</td> 
      <td><input type="number"></td> 
      <td>Unit</td> 
     </tr> 
     <tr class="group"> 
      <td colspan="3"></td> 
     </tr> 
     <tr> 
      <td>Title 3</td> 
      <td><input type="number"></td> 
      <td>Unit</td> 
     </tr> 
     <tr class="group"> 
      <td colspan="3"></td> 
     </tr> 
     <tr> 
      <td>Title 4</td> 
      <td><input type="number"></td> 
      <td>Unit</td> 
     </tr> 
    </tbody> 
</table> 

Und das ist mein JS das nächste Eingabefeld zu konzentrieren.

'change input[type="number"]': (event) => { 
    $(event.target).closest('tr').next(':not(.group)').find('input').focus(); 
} 

Dies funktioniert für das erste Feld. Das nächste Eingabefeld wird fokussiert. Aber ich kann das dritte Eingabefeld nicht fokussieren.

Ich habe auch versucht

'change input[type="number"]': (event) => { 
    $(event.target).closest('tr').siblings(':not(.group)').find('input').focus(); 
} 

Aber dann wird der Fokus auf das letzte Eingabefeld gesetzt und ich verstehe nicht, warum.

Answer 1

Das Problem ist, dass jQuery next() nur das nächste Geschwister sieht, nicht alle folgenden Geschwister. Was Sie wollen, ist nextAll():

$(event.target) 
    .closest('tr') 
    .nextAll('tr:not(.group)') 
    .first() 
    .find('input') 
    .focus();