ToneSwitch ToneSwitch - 1 month ago 9
CSS Question

Jquery moving to next row's input element by id



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





I have a table with multiple rows and each row has two inputs. Both have different ids. I'm trying to focus on next row's input element by selecting the id when user presses tab key . Here's my 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();
}

});


While doing this, it selects the wrong textbox on the next row.Any help would be appreciated. thanks

Answer

No jQuery required. Just use the tabindex attribute and hook into the browser's native behaviour for applying focus state on tab key presses.

Example:

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

Recommended for accessibility too.