Jquery移动到下一行's输入元素的id

Jquery moving to next row's input element by id

本文关键字：输入 元素 id 一行 移动 Jquery      更新时间：2023-09-26

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

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

不需要jQuery。只需使用tabindex属性并挂接浏览器的本地行为，即可在按tab键时应用focus状态。

示例：

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

建议也可访问。

相关文章：