Question

我想在field2Label之后添加field1Label，field2Input之后field1Input以及field2Label和field2Input之前使用jQuery在我的提交按钮之前添加field2Label。

所以它看起来像这样。

期望的输出。

但我的field2Input和<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript"> var formGroupRowDiv = $(document.createElement('div')).attr("class", 'form-group row'); var emptyColumn = $(document.createElement('div')) .attr("class", 'col-md-2'); var emptyColumn2 = $(document.createElement('div')).attr("class", 'col-md-2'); var field2Label = $(document.createElement('div')).attr("class", 'col-md-2'); var field2Input = $(document.createElement('div')).attr("class", 'col-md-3'); emptyColumn.appendTo(formGroupRowDiv); emptyColumn2.appendTo(formGroupRowDiv); field2Label.appendTo(formGroupRowDiv); field2Label.insertAfter('#field1Label').html( '<label for="field2Label">Field 2</label>'); field2Input .appendTo(formGroupRowDiv) .insertAfter('#field1Input') .html( '<input id="field2Input"' + '" name="field2Input"' + '" type="text" class="form-control">'); formGroupRowDiv.appendTo(".container"); </script> </head> <body> <div class="container"> <form id="form" name="form" method="POST"> <div class="form-group row"> <div class="col-md-2"></div> <div class="col-md-2"></div> <div class="col-md-2"> <label id="field1Label" for="field1">Field 1</label> </div> <div class="col-md-3"> <input type="text" class="form-control" id="field1Input" name="field1Input" /> </div> </div> <div class="form-group row"> <div class="col-md-2"></div> <div class="col-md-2"></div> <div class="col-md-1"></div> <div class="col-md-1"> <button id="newFieldBtn" value="newField" type="submit" name="button" class="btn btn-default">Submit</button> </div> </div> </form> </div> </body> </html>没有出现。请帮忙。

UPDATE Master SET [Date Closed] = Date()
WHERE NOT EXISTS (SELECT 1
                  FROM Extract
                  WHERE Master.Case = Extract.Case
                 );

Answer 1

使用fiddle

的简单解决方案

$(document).ready(function() {
    // firstRow is a row that you want to clone
    var firstRow = $("#form").find(".row").eq(0);

    // el is a cloned element, full copy of firstRow
    var el = firstRow.clone();

    // find <input> among el descendants and set proper attributes
    el.find("input").attr("name", "new_name").attr("id", "newId");

    // find <label> among el descendants and set proper attributes
    el.find("label").attr("id","newId").text("label2");

    // add `el` (cloned element) after `firstRow`
    firstRow.after(el);
});

Answer 2

你可以用简单的2行在JQuery中完成这个。由于您知道所需的标记，因此请创建标记字符串并将其附加到表单中的第一个元素之后。

关键是在body标记结束之后执行此脚本。

   var formGroupRowDiv = '<div class="form-group row"> <div class="col-md-2"></div> <div class="col-md-2"></div> <div class="col-md-2"> <label id="field1Label" for="field1">Field 2</label> </div> <div class="col-md-3"> <input type="text" class="form-control" id="field2Input" name="field2Input" /> </div> </div>';
   $("#form > :first").after(formGroupRowDiv);

＆＃13;

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<form id="form" name="form" method="POST">
			<div class="form-group row">
				<div class="col-md-2"></div>
				<div class="col-md-2"></div>
				<div class="col-md-2">
					<label id="field1Label" for="field1">Field 1</label>
				</div>
				<div class="col-md-3">
					<input type="text" class="form-control" id="field1Input"
						name="field1Input" />
				</div>
			</div>
			<div class="form-group row">
				<div class="col-md-2"></div>
				<div class="col-md-2"></div>
				<div class="col-md-1"></div>
				<div class="col-md-1">
					<button id="newFieldBtn" value="newField" type="submit"
						name="button" class="btn btn-default">Submit</button>
				</div>
			</div>
		</form>
	</div>
    
  <script type="text/javascript">
	
    var formGroupRowDiv = '<div class="form-group row"> <div class="col-md-2"></div> <div class="col-md-2"></div> <div class="col-md-2"> <label id="field1Label" for="field1">Field 2</label> </div> <div class="col-md-3"> <input type="text" class="form-control" id="field2Input" name="field2Input" /> </div> </div>';
   $("#form > :first").after(formGroupRowDiv);
  
</script>
</body>
</html>

＆＃13;

使用jQuery添加输入字段

2 个答案: