Jquery Bewegen zur nächsten Reihe des Eingangselementes durch id

Question

$('#Cart tbody tr #quantity').on('keydown', function (e) { 
 

 
     var keyCode = e.keyCode || e.which; 
 

 
     if (keyCode == 9) { 
 
      $(this).closest('tr').next().find('input[type=number]').focus(); 
 
     } 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="Cart" style="border-color: transparent;" class="table table-hover table-striped well"> 
 
    <thead class="thead-inverse"> 
 
    <tr> 
 
     <th class="col-lg-1 text-center">Quanity</th> 
 
     <th class="col-lg-3 text-center">Comment</th> 
 
    
 
    </tr> 
 
    </thead> 
 
    <tfoot> 
 
    <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    </tfoot> 
 
    <tbody> 
 
    <tr id="7392036"> 
 
     <td class="col-lg-1 text-center"> 
 
     <input type="number" class="form-control" id="quantity" value="0"> 
 
     </td> 
 
     <td class="text-center col-lg-3"> 
 
     <input type="text" maxlength="15" class="form-control" id="inputforcomment" value=""> 
 
     </td> 
 
     <td class="col-lg-1 text-center"> 
 
     <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> 
 
     </button> 
 
     </td> 
 
    </tr> 
 
     <tr id="7392036"> 
 
     <td class="col-lg-1 text-center"> 
 
     <input type="number" class="form-control" id="quantity" value="0"> 
 
     </td> 
 
     <td class="text-center col-lg-3"> 
 
     <input type="text" maxlength="15" class="form-control" id="inputforcomment" value=""> 
 
     </td> 
 
     <td class="col-lg-1 text-center"> 
 
     <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> 
 
     </button> 
 
     </td> 
 
    </tr> 
 
     <tr id="7392036"> 
 
     <td class="col-lg-1 text-center"> 
 
     <input type="number" class="form-control" id="quantity" value="0"> 
 
     </td> 
 
     <td class="text-center col-lg-3"> 
 
     <input type="text" maxlength="15" class="form-control" id="inputforcomment" value=""> 
 
     </td> 
 
     <td class="col-lg-1 text-center"> 
 
     <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> 
 
     </button> 
 
     </td> 
 
    </tr> 
 
     <tr id="7392036"> 
 
     <td class="col-lg-1 text-center"> 
 
     <input type="number" class="form-control" id="quantity" value="0"> 
 
     </td> 
 
     <td class="text-center col-lg-3"> 
 
     <input type="text" maxlength="15" class="form-control" id="inputforcomment" value=""> 
 
     </td> 
 
     <td class="col-lg-1 text-center"> 
 
     <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> 
 
     </button> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Ich habe eine Tabelle mit mehreren Zeilen und jede Zeile hat zwei Eingänge. Beide haben unterschiedliche IDs. Ich versuche, auf das Eingabeelement der nächsten Zeile zu fokussieren, indem ich die ID auswähle, wenn der Benutzer die Tabulatortaste drückt. Hier ist mein Code:

$('#Cart tbody tr #quantity').on('keydown', function (e) { 

    var keyCode = e.keyCode || e.which; 

    if (keyCode == 9) { 
     $(this).closest('tr').next().find('#quantity').focus(); 
    } 

}); 

Während dies tun, wählt es die falsche Textbox in der nächsten Zeile.Any Hilfe würde geschätzt werden. Danke

Answer 1

Keine jQuery erforderlich. Verwenden Sie einfach das tabindex Attribut und hängen Sie in das native Verhalten des Browsers ein, um den Status focus bei Drücken der Tabulatortaste zu übernehmen.

Beispiel:

<table> 
    <tr> 
     <td> 
      <input type="text" tabindex="1"> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <input type="text" tabindex="2"> 
     </td> 
    </tr> 
</table> 

Recommended for accessibility too.