將焦點設置到表格中的下一個輸入字段

Question

我想通過按enter將下一個輸入集中在表格字段中。 表看起來是這樣的：

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

這是我的JS關注下輸入字段。

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

這是工作的第一個領域。下一個輸入字段變得焦點。但我不能關注第三個輸入字段。

我也試過

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

但隨後的焦點被設置爲最後一個輸入字段，我不明白爲什麼。

Answer 1

問題是，jQuery的next()只看着下一個兄弟姐妹，而不是所有的兄弟姐妹。你想要的是nextAll()：

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