javascript - Jquery 通过 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>

我有一个包含多行的表格，每行都有两个输入。两者都有不同的ID。我试图通过在用户按下 tab 键时选择 id 来关注下一行的输入元素。这是我的代码:

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

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

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

});

执行此操作时，它会在下一行选择错误的文本框。如有任何帮助，我们将不胜感激。谢谢

Answer 1

不需要 jQuery。只需使用 tabindex 属性并 Hook 到浏览器的 native 行为中，以便在 Tab 键按下时应用 focus 状态。

例子:

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

Recommended for accessibility too .