Question

我有一个表格，每行有两个输入字段，最后一行有两个按钮“add-more”和“submit”

<form>
        <table>
          <tbody>
          <tr>
            <td>
              <table class="table no-border no-margin manage_admin_child_table">
                <tbody>
                <tr>
                  <td class="text-left" style="width:40%;">
                    <div data-role="input-control" class="input-control text">
                      <input type="text" name="operator[0][mcc]"  id="operator_mcc_0" placeholder="MCC" tabindex="1">
                      <button tabindex="" class="btn-clear" type="button"></button>
                    </div>
                  </td>
                  <td class="text-left" style="width:40%;">
                    <div data-role="input-control" class="input-control text">
                      <input type="text" name="operator[0][mnc]" placeholder="MNC" tabindex="2">
                      <button tabindex="" class="btn-clear" type="button"></button>
                    </div>
                  </td>
                  <td style="width:2%;">&nbsp;</td>
                </tr>
                </tbody>
              </table>
              <span class="wrapper"></span>
            </td>
          </tr>
          <tr>
            <td>
              <table class="table no-border no-margin manage_admin_child_table">
                <tbody>
                <tr>
                  <td class="text-left" style="width:40%;">
                    <div data-role="input-control" class="input-control text">
                      <input type="text" name="operator[0][mcc]"  id="operator_mcc_0" placeholder="MCC" tabindex="3">
                      <button tabindex="" class="btn-clear" type="button"></button>
                    </div>
                  </td>
                  <td class="text-left" style="width:40%;">
                    <div data-role="input-control" class="input-control text">
                      <input type="text" name="operator[0][mnc]" placeholder="MNC" tabindex="4">
                      <button tabindex="" class="btn-clear" type="button"></button>
                    </div>
                  </td>
                  <td style="width:2%;">&nbsp;</td>
                  <td class="text-left" style="vertical-align: middle;">
                    <a href="#" tabindex="5" class="remove-operator-code text-bold"><i class="fa fa-times"></i></a>
                  </td>
                </tr>
                </tbody>
              </table>
              <span class="wrapper"></span>
            </td>
          </tr>
          <tr>
            <td colspan="3">
              <div class="widget_box_footer_section">
                <a href="#" class="button meduim submit_button place-le add_field_button" id="add-operator" tabindex="6"><i class="fa fa-plus"></i> Add More</a>
                <button type="submit" class="button meduim submit_button place-right" id="operator_submit" tabindex="7">
                  <i class="fa fa-paper-plane"></i> Submit
                </button>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </form>

当我点击add-more时，它会添加新行（可能有很多行，我没有包含javascript，这里我用两个输入行硬编码了表单），有两个字段和十字图标要删除那个领域。并删除该字段我有一个javascript函数

  $(document).on('click','a.remove-operator-code',function() {
    $(this).parents('tr').first().remove();
  });

它已成功删除该行，但我不知道焦点的位置，我想解决这个焦点问题，当我们删除特定行时，焦点必须转到前一行的第一个输入字段

Answer 1

您需要使用：

$(document).on('click','a.remove-operator-code',function() { 
  vat prevtr = $(this).closest('tr').prev();
  if(prevtr.length)
     prevtr.find('input:first').focus()

  $(this).closest('tr').remove();
});

Answer 2

这会对你有帮助..

演示：http://jsfiddle.net/ajnf988s/

   $(document).on('click','a.remove-operator-code',function() { 
 $(this).parents('tr').prev('tr').find('input[type=text]:first').focus();
 $(this).parents('tr').remove();
  });

Javascript专注于前一行的第一个输入

2 个答案: