Question

我有一个表格，该表格应允许用户单击“添加行”并创建另一个相同的行。这将需要new row为用户提供一个选项，以便在意外创建时删除该行。这是我的代码，无法正常工作。在我单击添加行之后，第二次代码将插入另外3行。我插入和克隆新行的方式有些奇怪。

$("#add_row").on('click', addRow);
function addRow() {
    $(".data-bug-item").clone().insertAfter(".data-bug-item");
};

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script language="javascript" type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="dataBug" class="bug-section">
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <button type="button" class="btn" name="add_row" id="add_row">
                                                        <span class="glyphicon glyphicon-plus-sign"></span> Add Row
                                                    </button>
    </div>
  </div>
  <div class="form-group required data-bug-item">
    <label class="control-label" for="type"><span class="label label-default">Column & Description:</span></label>
    <div class="row">
      <div class="col-xs-3 col-sm-3 col-md-2 col-lg-2">
        <select class="form-control" name="frm_column" id="frm_column" required>
          <option value="">--Choose--</option>
          <option value="1">Location</option>
          <option value="2">Name</option>
          <option value="3">Year</option>
          <option value="4">City</option>
        </select>
      </div>
      <div class="col-xs-9 col-sm-9 col-md-10 col-lg-10">
        <input class="form-control" type="text" name="frm_descr" id="frm_descr" placeholder="Enter Description" required>
      </div>
    </div>
  </div>
</div>

我想同时看到“删除”的“描述”输入字段末尾的时间和按钮。

Answer 1

最简单的方法是克隆html的一小部分。

您正在克隆包括克隆部分在内的所有内容。

在data-bug-item之后，创建一个具有相同名称的div只是为了标识和克隆表单，而不是复制div中的所有信息。

示例：

$("#add_row").on('click', addRow);
function addRow() {
    $("#form-data-bug-item").clone().insertAfter(".data-bug-item");
};

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script language="javascript" type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="dataBug" class="bug-section">
  <div class="row">
	<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
	  <button type="button" class="btn" name="add_row" id="add_row">
														<span class="glyphicon glyphicon-plus-sign"></span> Add Row
													</button>
	</div>
  </div>
  <div class="form-group required data-bug-item">
  <div id="form-data-bug-item">
		<label class="control-label" for="type"><span class="label label-default">Column & Description:</span></label>
		<div class="row">
		  <div class="col-xs-3 col-sm-3 col-md-2 col-lg-2">
			<select class="form-control" name="frm_column" id="frm_column" required>
			  <option value="">--Choose--</option>
			  <option value="1">Location</option>
			  <option value="2">Name</option>
			  <option value="3">Year</option>
			  <option value="4">City</option>
			</select>
		  </div>
		  <div class="col-xs-9 col-sm-9 col-md-10 col-lg-10">
			<input class="form-control" type="text" name="frm_descr" id="frm_descr" placeholder="Enter Description" required>
		  </div>
		</div>
	</div>
  </div>
</div>

现在您只需要克隆form-data-bug-item

PS：我没有考虑代码中的其他问题，只是解决方案。

如何克隆div内容并一次仅添加一个？

1 个答案: