HTML 表单 - 添加新表格行并将焦点设置在第一个输入上的脚本

Question

我有一个带有 2 个文本输入的简单表和一个脚本，该脚本在修改第一个输入字段时运行，该字段查询数据库，然后更新同一行中的其他 3 个单元格。 它还在表格末尾添加了一个新的空白行。

我现在想将用户的 cursor 放在新创建的表格行的第一个输入字段中，以节省他们必须手动单击的情况（他们将使用条形码扫描仪，因此手不会总是在键盘上/鼠标在这里）。

这是我的表格/脚本：

 $(document).ready(function() { $("#addRow").click(function() { var markup = "<tr><td><input type=\"text\" class=\"form-control serialNumber\" autocomplete=\"off\" placeholder=\"Serial Number\" name=\"serialNumber[]\" value=\"\"></td><td><input type=\"text\" class=\"form-control assetID\" autocomplete=\"off\" placeholder=\"Asset ID\" name=\"assetID[]\" value=\"\"></td></td><td class=\"productCode\"></td><td class=\"description\"></td><td class=\"text-center deleteRow\"><span class=\"glyphicon glyphicon-trash\"></span></td></tr>"; $("#shipmentItems").append(markup); }); // Find and remove selected table rows $("#shipmentItems").on("click", ".deleteRow", function() { $(this).closest('tr').remove(); }); }); $(document).ready(function() { $(document).on('change', '.form-control.serialNumber', function() { var serialNumber = $(this).val(); //console.log( recid ); // Create a reference to $(this) here: $this = $(this); ID = 'ABC123'; code = 'PC8765'; description = 'Acme Standard Widget'; $this.closest('tr').find('.form-control.assetID').val(ID); $this.closest('tr').children('.code').html(code); $this.closest('tr').children('.description').html(description); var markup = "<tr><td><input type=\"text\" class=\"form-control serialNumber\" autocomplete=\"off\" placeholder=\"Serial Number\" name=\"serialNumber[]\" value=\"\"></td><td><input type=\"text\" class=\"form-control assetID\" autocomplete=\"off\" placeholder=\"Asset ID\" name=\"assetID[]\" value=\"\"></td></td><td class=\"code\"></td><td class=\"description\"></td><td class=\"text-center deleteRow\"><span class=\"glyphicon glyphicon-trash\"></span></td></tr>"; $("#shipmentItems").append(markup); }); });

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <table id="shipmentItems" class="table table-condensed table-striped table-bordered"> <thead> <th class="text-center" scope="col" width="20%">Serial</th> <th class="text-center" scope="col" width="15%">ID</th> <th class="text-center" scope="col" width="15%">Code</th> <th class="text-center" scope="col" width="45%">Description</th> <th class="text-center" scope="col" width="5%"></th> </thead> <tbody> <tr> <td><input type="text" class="form-control serialNumber" autocomplete="off" placeholder="Serial Number" name="serialNumber[]" value=""></td> <td><input type="text" class="form-control assetID" autocomplete="off" placeholder="Asset ID" name="assetID[]" value=""></td> <td class="code"></td> <td class="description"></td> <td class="deleteRow"><span class="glyphicon glyphicon-trash"></span></td> </tr> </tbody> </table> <button type="button" name="addRow" value="addRow" id="addRow" class="btn btn-primary">Add Asset</button> &nbsp; &nbsp;

目前是成功创建新行，但我找不到正确的语法将焦点放在新创建的行中的第一个输入上。

Answer 1

您可以添加以下代码：

$('input[name="serialNumber[]"]').last().focus();

在这条线之后

$("#shipmentItems").append(markup);

Answer 2

#addRow按钮的 eventHandler 中。 如果您希望在页面加载时最初选择第一个输入，也可以在 eventHandler 之外。

 $('tr').last().find('td:first-of-type input').focus();

这些行在下面的代码中进行了注释：

 $(document).ready(function() { $("#addRow").click(function() { var markup = "<tr><td><input type=\"text\" class=\"form-control serialNumber\" autocomplete=\"off\" placeholder=\"Serial Number\" name=\"serialNumber[]\" value=\"\"></td><td><input type=\"text\" class=\"form-control assetID\" autocomplete=\"off\" placeholder=\"Asset ID\" name=\"assetID[]\" value=\"\"></td></td><td class=\"productCode\"></td><td class=\"description\"></td><td class=\"text-center deleteRow\"><span class=\"glyphicon glyphicon-trash\"></span></td></tr>"; $("#shipmentItems").append(markup); // This will focus on the new input on every click $('tr').last().find('td:first-of-type input').focus(); }); /* This line is added if the input is selected on page load */ $('tr').last().find('td:first-of-type input').focus(); $("#shipmentItems").on("click", ".deleteRow", function() { $(this).closest('tr').remove(); }); }); $(document).ready(function() { $(document).on('change', '.form-control.serialNumber', function() { var serialNumber = $(this).val(); $this = $(this); ID = 'ABC123'; code = 'PC8765'; description = 'Acme Standard Widget'; $this.closest('tr').find('.form-control.assetID').val(ID); $this.closest('tr').children('.code').html(code); $this.closest('tr').children('.description').html(description); var markup = "<tr><td><input type=\"text\" class=\"form-control serialNumber\" autocomplete=\"off\" placeholder=\"Serial Number\" name=\"serialNumber[]\" value=\"\"></td><td><input type=\"text\" class=\"form-control assetID\" autocomplete=\"off\" placeholder=\"Asset ID\" name=\"assetID[]\" value=\"\"></td></td><td class=\"code\"></td><td class=\"description\"></td><td class=\"text-center deleteRow\"><span class=\"glyphicon glyphicon-trash\"></span></td></tr>"; $("#shipmentItems").append(markup); }); });

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <table id="shipmentItems" class="table table-condensed table-striped table-bordered"> <thead> <th class="text-center" scope="col" width="20%">Serial</th> <th class="text-center" scope="col" width="15%">ID</th> <th class="text-center" scope="col" width="15%">Code</th> <th class="text-center" scope="col" width="45%">Description</th> <th class="text-center" scope="col" width="5%"></th> </thead> <tbody> <tr> <td><input type="text" class="form-control serialNumber" autocomplete="off" placeholder="Serial Number" name="serialNumber[]" value=""></td> <td><input type="text" class="form-control assetID" autocomplete="off" placeholder="Asset ID" name="assetID[]" value=""></td> <td class="code"></td> <td class="description"></td> <td class="deleteRow"><span class="glyphicon glyphicon-trash"></span></td> </tr> </tbody> </table> <button type="button" name="addRow" value="addRow" id="addRow" class="btn btn-primary">Add Asset</button> &nbsp; &nbsp;