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

Posted

技术标签:

【中文标题】HTML 表单 - 添加新表格行并将焦点设置在第一个输入上的脚本【英文标题】:HTML Form - Script To add New Table Row and set focus on first input 【发布时间】:2022-01-16 16:25:05 【问题描述】:

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

我现在想将用户的光标放在新创建的表格行的第一个输入字段中,以节省他们必须手动点击进入的时间(他们将使用条形码扫描仪,因此手不会总是在这里的键盘/鼠标)。

这是我的表格/脚本:

$(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" >Serial</th>
    <th class="text-center" scope="col" >ID</th>
    <th class="text-center" scope="col" >Code</th>
    <th class="text-center" scope="col" >Description</th>
    <th class="text-center" scope="col" ></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;

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

【问题讨论】:

【参考方案1】:

将以下行放在#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" >Serial</th>
    <th class="text-center" scope="col" >ID</th>
    <th class="text-center" scope="col" >Code</th>
    <th class="text-center" scope="col" >Description</th>
    <th class="text-center" scope="col" ></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;

【讨论】:

【参考方案2】:

您可以添加此代码:

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

在这行之后

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

【讨论】:

以上是关于HTML 表单 - 添加新表格行并将焦点设置在第一个输入上的脚本的主要内容,如果未能解决你的问题,请参考以下文章

html如何运用表格,表单

html如何运用表格,表单

html如何运用表格,表单

主窗体记录更改时从子窗体移动焦点

如何将焦点设置在打开新表单之前选择的最后一条记录上

WPS的EXCEL表格,打印的时候,总是一半在第一页,另一半在第二页,求指点,怎样整合?