Question

我想做什么!!

页面上有一个文本框，页面加载焦点将设置到文本框中我将扫描一个项目，它的数字将插入文本框。基于值，它将添加在html table中有一行。同时我想把重点放在＆＃34; CODE＆＃34;单元格文本框。

因此，每当我扫描某些内容时，它会在下表中插入一行，每次我想将焦点设置在最后一行的CODE列的单元格中。在代码列中，我们将扫描该值，它将显示在同一个细胞。

如果可能的话，我想在代码单元格值中扫描值后将焦点设置回文本框。所以基本上是来回扫描过程。

＆＃13;

<input type="text" name=" " value=" ">
<br>
<div class="t-Report-tableWrap">
  <table class="t-Report-report" summary="Text Test">
    <thead>
      <tr>
        <th class="t-Report-colHead"  align="center"  id="DERIVED$01" >&nbsp;</th>
        <th class="t-Report-colHead"  align="center"  id="C003" >Id</th>
        <th class="t-Report-colHead"  align="center"  id="C001" >Name</th>
        <th class="t-Report-colHead"  align="center"  id="C002" >Code</th>
        <th class="t-Report-colHead"  align="center"  id="C007" >Text</th>
      </tr>
    </thead>
    <tbody>
      <tr id="init_row_invoice" style="display:none;" >
        <td class="t-Report-cell"  headers="DERIVED$01">
          <a href ="javascript:void();" class="fa fa-trash-o"></a>
        </td>
        <td class="t-Report-cell" headers="C003">(null)</td>
        <td class="t-Report-cell" headers="C001">(null)</td>
        <td class="t-Report-cell" headers="C002">
          <label for="f02_0000" id="f02_0000_LABEL" class="u-VisuallyHidden"></label>
          <input type="text" name="f02" size="15" maxlength="2000" value="" class="u-TF-item u-TF-item--text" id="f02_0000" />
        </td>
        <td class="t-Report-cell"  headers="C007">
          <label for="f03_0000" id="f03_0000_LABEL" class="u-VisuallyHidden"></label>
          <input type="text" name="f03" size="15" maxlength="2000" value="" class="u-TF-item u-TF-item--text" id="f03_0000" />
          <input type="hidden" name="f01" value="" class="u-TF-item u-TF-item--hidden" id="f01_0000" />
          <input type="hidden" name="f04" value="" class="u-TF-item u-TF-item--hidden" id="f04_0000" />
          <input type="hidden" id="fcs_0000" name="fcs" value="">
          <input type="hidden" id="fcud_0000" name="fcud" value="D" />
        </td>
      </tr>
      <tr>
        <td class="t-Report-cell"  headers="DERIVED$01">
          <a href ="javascript:void(1);" class="fa fa-trash-o"></a>
        </td>
        <td class="t-Report-cell" headers="C003">90001</td>
        <td class="t-Report-cell" headers="C001">Samsung Galaxy J3 Pro</td>
        <td class="t-Report-cell"  headers="C002">
          <label for="f02_0001" id="f02_0001_LABEL" class="u-VisuallyHidden"></label>
          <input type="text" name="f02" size="15" maxlength="2000" value="123456" class="u-TF-item u-TF-item--text" id="f02_0001" />
        </td>
        <td class="t-Report-cell"  headers="C007">
          <label for="f03_0001" id="f03_0001_LABEL" class="u-VisuallyHidden"></label>
          <input type="text" name="f03" size="15" maxlength="2000" value="1" class="u-TF-item u-TF-item--text" id="f03_0001" />
          <input type="hidden" name="f01" value="" class="u-TF-item u-TF-item--hidden" id="f01_0001" />
          <input type="hidden" name="f04" value="1" class="u-TF-item u-TF-item--hidden" id="f04_0001" />
          <input type="hidden" id="fcs_0001" name="fcs" value="9F677BEDD6F6624C586A9DA8BB60AA3DC1746ED2">
          <input type="hidden" id="fcud_0001" name="fcud" value="U" />
        </td>
      </tr>
    </tbody>
  </table>
</div>
<div class="t-Report-links"></div>
<table class="t-Report-pagination t-Report-pagination--bottom" role="presentation">
  <tr>
    <td colspan="9" align="right" >
      <table role="presentation" >
        <tr>
          <td class="pagination"></td>
          <td class="pagination"></td>
          <td nowrap="nowrap" class="pagination">
            <span class="t-Report-paginationText">1 - 3</span>
          </td>
          <td class="pagination"></td>
          <td class="pagination"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</div>

＆＃13;

更清楚。

从贴纸中扫描值，它会将值插入文本框中，它会在表中添加一个rwo，同时它将焦点设置到此处最后一行的单元格列CODE，我们将从贴纸扫描值并扫描后它应该将焦点设置回文本框。

Answer 1

您可以使用解决方案

＆＃13;

$('table.t-Report-report')
  .find('tr')
  .last()
  .find('input[type="text"]')
  .first()
  .focus();

$('input').first().focus();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name=" " value=" "><br>
<div class="t-Report-tableWrap">
<table class="t-Report-report" summary="Text Test">
  <thead>
    <tr>
      <th class="t-Report-colHead"  align="center"  id="DERIVED$01" >&nbsp;</th>
      <th class="t-Report-colHead"  align="center"  id="C003" >Id</th>
      <th class="t-Report-colHead"  align="center"  id="C001" >Name</th>
      <th class="t-Report-colHead"  align="center"  id="C002" >Code</th>
      <th class="t-Report-colHead"  align="center"  id="C007" >Text</th>
    </tr>
  </thead>
  <tbody>
    <tr id="init_row_invoice" style="display:none;" >
      <td class="t-Report-cell"  headers="DERIVED$01"><a href ="javascript:void();" class="fa fa-trash-o"></a></td><td class="t-Report-cell"  headers="C003">(null)</td>
      <td class="t-Report-cell"  headers="C001">(null)</td>
      <td class="t-Report-cell"  headers="C002"><label for="f02_0000" id="f02_0000_LABEL" class="u-VisuallyHidden"></label><input type="text" name="f02" size="15" maxlength="2000" value="" class="u-TF-item u-TF-item--text " id="f02_0000" /></td>
      <td class="t-Report-cell"  headers="C007"><label for="f03_0000" id="f03_0000_LABEL" class="u-VisuallyHidden"></label><input type="text" name="f03" size="15" maxlength="2000" value="" class="u-TF-item u-TF-item--text "  id="f03_0000" /><input type="hidden" name="f01" value="" class="u-TF-item u-TF-item--hidden "  id="f01_0000" /><input type="hidden" name="f04" value="" class="u-TF-item u-TF-item--hidden "  id="f04_0000" /><input type="hidden" id="fcs_0000" name="fcs" value=""><input type="hidden" id="fcud_0000" name="fcud" value="D" />
      </td>
    </tr>
    <tr>
        <td class="t-Report-cell"  headers="DERIVED$01"><a href ="javascript:void(1);" class="fa fa-trash-o"></a></td>
        <td class="t-Report-cell"  headers="C003">90001</td>
        <td class="t-Report-cell"  headers="C001">Samsung Galaxy J3 Pro</td>
        <td class="t-Report-cell"  headers="C002"><label for="f02_0001" id="f02_0001_LABEL" class="u-VisuallyHidden"></label><input type="text" name="f02" size="15" maxlength="2000" value="123456" class="u-TF-item u-TF-item--text "  id="f02_0001" /></td>
        <td class="t-Report-cell"  headers="C007">
          <label for="f03_0001" id="f03_0001_LABEL" class="u-VisuallyHidden"></label>
          <input type="text" name="f03" size="15" maxlength="2000" value="1" class="u-TF-item u-TF-item--text " id="f03_0001" />
          <input type="hidden" name="f01" value="" class="u-TF-item u-TF-item--hidden "  id="f01_0001" /><input type="hidden" name="f04" value="1" class="u-TF-item u-TF-item--hidden "  id="f04_0001" /><input type="hidden" id="fcs_0001" name="fcs" value="9F677BEDD6F6624C586A9DA8BB60AA3DC1746ED2"><input type="hidden" id="fcud_0001" name="fcud" value="U" />
        </td>
      </tr>
    </tbody>
  </table>
</div>
<div class="t-Report-links"></div>
  <table class="t-Report-pagination t-Report-pagination--bottom" role="presentation"><tr><td colspan="9" align="right" ><table role="presentation" ><tr><td class="pagination"></td><td class="pagination"></td><td nowrap="nowrap" class="pagination"><span class="t-Report-paginationText">1 - 3</span></td><td class="pagination"></td><td class="pagination"></td></tr></table></td></tr></table>
</div>

＆＃13;

希望这会对你有所帮助。

Answer 2

长度＆gt; 0

$(document).on('click', '#btn_process', function() {
  var tr = $('#init_row_invoice').clone(true);
  $('table.t-Report-report tbody').append(tr.show());
  $(tr).find('input[type=text][name=f03]').val('123');
  if ($(tr).find('input[type=text][name=f03]').val().length > 0) {
    $(tr).find('input[type=text][name=f02]').focus();
  } else {}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name=" " value=" "><input id="btn_process" type="submit" value="process" /?<br>
<div class="t-Report-tableWrap">
  <table class="t-Report-report" summary="Text Test">
    <thead>
      <tr>
        <th class="t-Report-colHead" align="center" id="DERIVED$01">&nbsp;</th>
        <th class="t-Report-colHead" align="center" id="C003">Id</th>
        <th class="t-Report-colHead" align="center" id="C001">Name</th>
        <th class="t-Report-colHead" align="center" id="C002">Code</th>
        <th class="t-Report-colHead" align="center" id="C007">Text</th>
      </tr>
    </thead>
    <tbody>
      <tr id="init_row_invoice" style="display:none;">
        <td class="t-Report-cell" headers="DERIVED$01">
          <a href="javascript:void();" class="fa fa-trash-o"></a>
        </td>
        <td class="t-Report-cell" headers="C003">(null)</td>
        <td class="t-Report-cell" headers="C001">(null)</td>
        <td class="t-Report-cell" headers="C002"><label for="f02_0000" id="f02_0000_LABEL" class="u-VisuallyHidden"></label><input type="text" name="f02" size="15" maxlength="2000" value="" class="u-TF-item u-TF-item--text " id="f02_0000" /></td>
        <td class="t-Report-cell" headers="C007">
          <label for="f03_0000" id="f03_0000_LABEL" class="u-VisuallyHidden"></label>
          <input type="text" name="f03" size="15" maxlength="2000" value="" class="u-TF-item u-TF-item--text " id="f03_0000" />
          <input type="hidden" name="f01" value="" class="u-TF-item u-TF-item--hidden " id="f01_0000" />
          <input type="hidden" name="f04" value="" class="u-TF-item u-TF-item--hidden " id="f04_0000" />
          <input type="hidden" id="fcs_0000" name="fcs" value=""><input type="hidden" id="fcud_0000" name="fcud" value="D" />
        </td>
      </tr>
      <tr>
        <td class="t-Report-cell" headers="DERIVED$01">
          <a href="javascript:void(1);" class="fa fa-trash-o"></a>
        </td>
        <td class="t-Report-cell" headers="C003">90001</td>
        <td class="t-Report-cell" headers="C001">Samsung Galaxy J3 Pro</td>
        <td class="t-Report-cell" headers="C002"><label for="f02_0001" id="f02_0001_LABEL" class="u-VisuallyHidden"></label><input type="text" name="f02" size="15" maxlength="2000" value="123456" class="u-TF-item u-TF-item--text " id="f02_0001" /></td>
        <td class="t-Report-cell" headers="C007"><label for="f03_0001" id="f03_0001_LABEL" class="u-VisuallyHidden"></label><input type="text" name="f03" size="15" maxlength="2000" value="1" class="u-TF-item u-TF-item--text " id="f03_0001" /><input type="hidden" name="f01" value="" class="u-TF-item u-TF-item--hidden "
            id="f01_0001" /><input type="hidden" name="f04" value="1" class="u-TF-item u-TF-item--hidden " id="f04_0001" /><input type="hidden" id="fcs_0001" name="fcs" value="9F677BEDD6F6624C586A9DA8BB60AA3DC1746ED2"><input type="hidden" id="fcud_0001"
            name="fcud" value="U" />
        </td>
      </tr>

    </tbody>
  </table>
</div>
<div class="t-Report-links"></div>
<table class="t-Report-pagination t-Report-pagination--bottom" role="presentation">
  <tr>
    <td colspan="9" align="right">
      <table role="presentation">
        <tr>
          <td class="pagination"></td>
          <td class="pagination"></td>
          <td nowrap="nowrap" class="pagination"><span class="t-Report-paginationText">1 - 3</span></td>
          <td class="pagination"></td>
          <td class="pagination"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

长度== 0

$(document).on('click', '#btn_process', function() {
  var tr = $('#init_row_invoice').clone(true);
  $('table.t-Report-report tbody').append(tr.show());
  $(tr).find('input[type=text][name=f03]').val('');
  if ($(tr).find('input[type=text][name=f03]').val().length > 0) {
    $(tr).find('input[type=text][name=f02]').focus();
  } else {}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name=" " value=" "><input id="btn_process" type="submit" value="process" /?<br>
<div class="t-Report-tableWrap">
  <table class="t-Report-report" summary="Text Test">
    <thead>
      <tr>
        <th class="t-Report-colHead" align="center" id="DERIVED$01">&nbsp;</th>
        <th class="t-Report-colHead" align="center" id="C003">Id</th>
        <th class="t-Report-colHead" align="center" id="C001">Name</th>
        <th class="t-Report-colHead" align="center" id="C002">Code</th>
        <th class="t-Report-colHead" align="center" id="C007">Text</th>
      </tr>
    </thead>
    <tbody>
      <tr id="init_row_invoice" style="display:none;">
        <td class="t-Report-cell" headers="DERIVED$01">
          <a href="javascript:void();" class="fa fa-trash-o"></a>
        </td>
        <td class="t-Report-cell" headers="C003">(null)</td>
        <td class="t-Report-cell" headers="C001">(null)</td>
        <td class="t-Report-cell" headers="C002"><label for="f02_0000" id="f02_0000_LABEL" class="u-VisuallyHidden"></label><input type="text" name="f02" size="15" maxlength="2000" value="" class="u-TF-item u-TF-item--text " id="f02_0000" /></td>
        <td class="t-Report-cell" headers="C007">
          <label for="f03_0000" id="f03_0000_LABEL" class="u-VisuallyHidden"></label>
          <input type="text" name="f03" size="15" maxlength="2000" value="" class="u-TF-item u-TF-item--text " id="f03_0000" />
          <input type="hidden" name="f01" value="" class="u-TF-item u-TF-item--hidden " id="f01_0000" />
          <input type="hidden" name="f04" value="" class="u-TF-item u-TF-item--hidden " id="f04_0000" />
          <input type="hidden" id="fcs_0000" name="fcs" value=""><input type="hidden" id="fcud_0000" name="fcud" value="D" />
        </td>
      </tr>
      <tr>
        <td class="t-Report-cell" headers="DERIVED$01">
          <a href="javascript:void(1);" class="fa fa-trash-o"></a>
        </td>
        <td class="t-Report-cell" headers="C003">90001</td>
        <td class="t-Report-cell" headers="C001">Samsung Galaxy J3 Pro</td>
        <td class="t-Report-cell" headers="C002"><label for="f02_0001" id="f02_0001_LABEL" class="u-VisuallyHidden"></label><input type="text" name="f02" size="15" maxlength="2000" value="123456" class="u-TF-item u-TF-item--text " id="f02_0001" /></td>
        <td class="t-Report-cell" headers="C007"><label for="f03_0001" id="f03_0001_LABEL" class="u-VisuallyHidden"></label><input type="text" name="f03" size="15" maxlength="2000" value="1" class="u-TF-item u-TF-item--text " id="f03_0001" /><input type="hidden" name="f01" value="" class="u-TF-item u-TF-item--hidden "
            id="f01_0001" /><input type="hidden" name="f04" value="1" class="u-TF-item u-TF-item--hidden " id="f04_0001" /><input type="hidden" id="fcs_0001" name="fcs" value="9F677BEDD6F6624C586A9DA8BB60AA3DC1746ED2"><input type="hidden" id="fcud_0001"
            name="fcud" value="U" />
        </td>
      </tr>

    </tbody>
  </table>
</div>
<div class="t-Report-links"></div>
<table class="t-Report-pagination t-Report-pagination--bottom" role="presentation">
  <tr>
    <td colspan="9" align="right">
      <table role="presentation">
        <tr>
          <td class="pagination"></td>
          <td class="pagination"></td>
          <td nowrap="nowrap" class="pagination"><span class="t-Report-paginationText">1 - 3</span></td>
          <td class="pagination"></td>
          <td class="pagination"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

检查长度如：

$(tr).find('input[type=text][name=f03]').val().length > 0

设定焦点

$(tr).find('input[type=text][name=f02]').focus();

当文本框值更改时，将焦点设置在表格最后一行的特定单元格上

2 个答案: