【问题标题】:Want to create a copy of the elements on button click想要在按钮单击时创建元素的副本
【发布时间】:2018-09-17 20:29:27
【问题描述】:

我有一个注册表

当用户单击+ 按钮时,我想将<fieldset> 标记之间的内容/元素附加到行尾。

事实上,您看到的第一行结果是重新创建

感谢您的帮助

<script>		
  function myFunction() {

  }
</script>
<!DOCTYPE html>
<html lang="en" >
	<head>
		<meta charset="UTF-8">
		<title>Information Form</title>
	</head>
	<body>

	

	<fieldset>
		<h2 class="fs-title">Registration Form</h2>
    
				<div class="form-item webform-component webform-component-textfield hs_average_gift_size_in_year_2 field hs-form-field" id="webform-component-cultivation--amount-2">
				<div style="width: 17%;float: right;">
					<!-- Begin W_Language Field -->
					<label for="W_Language">LANGUAGE</label>
					<select id="W_Language" class="form-control" name="W_Language">
						<option selected>NONE</option> 
						<option>EN</option> 
						<option>FR</option> 
						<option>GE</option> 
						<option>AR</option> 
					</select>	
					<!-- End W_Language Field -->
				</div>
				<div style="width: 17%;float: right;">
					<!-- Begin exam Field -->
					<label for="W_exam">EXAM</label>
					<select id="W_exam" class="form-control" name="W_exam">
						<option selected>NONE</option> 
						<option>IELTS</option> 
						<option>TOEFL</option> 
						<option>GRE</option> 
						<option>KET</option> 
						<option>FCE</option> 
						<option>MSRT</option> 
						<option>TOLIMO</option> 
						<option>MCHE</option> 
						<option>CPE</option> 
					</select>	
					<!-- End W_exam Field -->
				</div>
				<div style="width: 8%;float: left;">
					<!-- Begin W_Language Field -->
					<button onclick="myFunction();return false" class="btn1" >+</button>
				</div>
				<div style="width: 12%;float: left;">
					<!-- Begin W_Language Field -->
					<label for="W_Speack">speck</label>
					<select id="W_Language" class="form-control" name="W_Language">
						<option selected>4</option> 
						<option>4.5</option> 
						<option>5</option> 
						<option>5.5</option> 
						<option>6</option> 
						<option>6.5</option> 
						<option>7</option> 
						<option>7.5</option> 
						<option>8</option> 
						<option>8.5</option> 
						<option>9</option> 
					</select>	
					<!-- End W_Language Field -->
				</div>
				<div style="width: 12%;float: left;">
					<!-- Begin W_Language Field -->
					<label for="W_Listen">listening</label>
					<select id="W_Language" class="form-control" name="W_Language">
						<option selected>4</option> 
						<option>4.5</option> 
						<option>5</option> 
						<option>5.5</option> 
						<option>6</option> 
						<option>6.5</option> 
						<option>7</option> 
						<option>7.5</option> 
						<option>8</option> 
						<option>8.5</option> 
						<option>9</option> 
					</select>	
					<!-- End Language Field -->
				</div>
				<div style="width: 12%;float: left;">
					<!-- Begin Language Field -->
					<label for="W_Reading">reading</label>
					<select id="Language" class="form-control" name="Language">
						<option selected>4</option> 
						<option>4.5</option> 
						<option>5</option> 
						<option>5.5</option> 
						<option>6</option> 
						<option>6.5</option> 
						<option>7</option> 
						<option>7.5</option> 
						<option>8</option> 
						<option>8.5</option> 
						<option>9</option> 
					</select>	
					<!-- End Language Field -->
				</div>
				<div style="width: 12%;float: left;">
					<!-- Begin W_Writing Field -->
					<label for="W_Writing">writing</label>
					<select id="W_Writing" class="form-control" name="W_Writing">
						<option selected>4</option> 
						<option>4.5</option> 
						<option>5</option> 
						<option>5.5</option> 
						<option>6</option> 
						<option>6.5</option> 
						<option>7</option> 
						<option>7.5</option> 
						<option>8</option> 
						<option>8.5</option> 
						<option>9</option> 
					</select>	
					<!-- End W_Writing Field -->
				</div>
			</div>
				 

	  </fieldset>
	</body>

</html>

【问题讨论】:

  • 你为什么得了负分?
  • 我没有投反对票,但我猜这是因为你的问题很难理解。我会添加更多信息来澄清问题所在。此外,任何投反对票的人都应该说明原因,如果还没有说过的话。
  • @Matt 谢谢朋友。你明白我的意思吗?
  • 基本上你想在按钮点击的第一组输入之上添加另一组相同的输入。对吗?
  • @Matt 是的,我同意你的看法。但如果我的问题没有澄清,那么我会编辑

标签: javascript css html bootstrap-4


【解决方案1】:

您可以为此使用 clone 函数。

clone() 方法复制所选元素,包括子节点、文本和属性。

function myFunction() {
				$(".form-item:last-child").after($(".form-item:last-child").clone(true));
			}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" >
	<head>
		<meta charset="UTF-8">
		<title>Information Form</title>
	</head>
	<body>

	

	<fieldset>
		<h2 class="fs-title">Registration Form</h2>
    
				<div class="form-item webform-component webform-component-textfield hs_average_gift_size_in_year_2 field hs-form-field" id="webform-component-cultivation--amount-2">
				<div style="width: 17%;float: right;">
					<!-- Begin W_Language Field -->
					<label for="W_Language">LANGUAGE</label>
					<select id="W_Language" class="form-control" name="W_Language">
						<option selected>NONE</option> 
						<option>EN</option> 
						<option>FR</option> 
						<option>GE</option> 
						<option>AR</option> 
					</select>	
					<!-- End W_Language Field -->
				</div>
				<div style="width: 17%;float: right;">
					<!-- Begin exam Field -->
					<label for="W_exam">EXAM</label>
					<select id="W_exam" class="form-control" name="W_exam">
						<option selected>NONE</option> 
						<option>IELTS</option> 
						<option>TOEFL</option> 
						<option>GRE</option> 
						<option>KET</option> 
						<option>FCE</option> 
						<option>MSRT</option> 
						<option>TOLIMO</option> 
						<option>MCHE</option> 
						<option>CPE</option> 
					</select>	
					<!-- End W_exam Field -->
				</div>
				<div style="width: 8%;float: left;">
					<!-- Begin W_Language Field -->
					<button class="btn1" onclick="myFunction();return false">+</button>
				</div>
				<div style="width: 12%;float: left;">
					<!-- Begin W_Language Field -->
					<label for="W_Speack">speck</label>
					<select id="W_Language" class="form-control" name="W_Language">
						<option selected>4</option> 
						<option>4.5</option> 
						<option>5</option> 
						<option>5.5</option> 
						<option>6</option> 
						<option>6.5</option> 
						<option>7</option> 
						<option>7.5</option> 
						<option>8</option> 
						<option>8.5</option> 
						<option>9</option> 
					</select>	
					<!-- End W_Language Field -->
				</div>
				<div style="width: 12%;float: left;">
					<!-- Begin W_Language Field -->
					<label for="W_Listen">listening</label>
					<select id="W_Language" class="form-control" name="W_Language">
						<option selected>4</option> 
						<option>4.5</option> 
						<option>5</option> 
						<option>5.5</option> 
						<option>6</option> 
						<option>6.5</option> 
						<option>7</option> 
						<option>7.5</option> 
						<option>8</option> 
						<option>8.5</option> 
						<option>9</option> 
					</select>	
					<!-- End Language Field -->
				</div>
				<div style="width: 12%;float: left;">
					<!-- Begin Language Field -->
					<label for="W_Reading">reading</label>
					<select id="Language" class="form-control" name="Language">
						<option selected>4</option> 
						<option>4.5</option> 
						<option>5</option> 
						<option>5.5</option> 
						<option>6</option> 
						<option>6.5</option> 
						<option>7</option> 
						<option>7.5</option> 
						<option>8</option> 
						<option>8.5</option> 
						<option>9</option> 
					</select>	
					<!-- End Language Field -->
				</div>
				<div style="width: 12%;float: left;">
					<!-- Begin W_Writing Field -->
					<label for="W_Writing">writing</label>
					<select id="W_Writing" class="form-control" name="W_Writing">
						<option selected>4</option> 
						<option>4.5</option> 
						<option>5</option> 
						<option>5.5</option> 
						<option>6</option> 
						<option>6.5</option> 
						<option>7</option> 
						<option>7.5</option> 
						<option>8</option> 
						<option>8.5</option> 
						<option>9</option> 
					</select>	
					<!-- End W_Writing Field -->
				</div>
			</div>
				 

	  </fieldset>
	</body>

</html>

【讨论】:

  • 谢谢朋友。请投票我的问题,我得到了 4 否定! :(我不知道为什么?!!
  • 这是您要找的吗?
猜你喜欢
  • 2020-06-15
  • 1970-01-01
  • 2018-05-01
  • 1970-01-01
  • 2013-02-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多