如何动态增加输入控制...？？？ (javascript)答案

【问题标题】：how to dynamically increment input control...??? (java script)如何动态增加输入控制...？？？ (javascript)
【发布时间】：2017-11-23 20:38:14
【问题描述】：

我使用for 循环复制表格内容n 次。不幸的是，我在下面提到的代码仅适用于第一个表。

如何使它适用于每张桌子？请为此提出一些解决方案。（我是初学者）

function copy() {
    var text1 = document.getElementById("Name1").value;
    document.getElementById("Name2").value = text1;
    var text2 = document.getElementById("Name3").value;
    document.getElementById("Name4").value = text2;
}

<tr><td rowspan="3" style="height:100px;">
Name  <input type="text" name="Emp name"  placeholder="enter your name"  id="Name1"/><br>
ID    <input type="id" name="Emp Id" placeholder="enter id" id="Name3" > </td>

<td style="height:150px;">

<input type="button" value="Get data" onclick="copy();"/>
<label for="text"> Name : <input type="text" id="Name2"></label>
<label for="text"> ID   : <input type="id" id="Name4"></label> 

</td></tr>

【问题讨论】：

因为每个元素的 id 属性应该是唯一的。你不应该复制它。
oh.suggest me some solution buddy.
可以使用 jquery 吗？ . @Bala_Poyyamoli
请你帮忙用javascript..??@JYoThI
首先您需要将所有 id 更改为类名并点击此链接。你会知道怎么做。 stackoverflow.com/questions/29042140/…

标签： javascript html css

【解决方案1】：

1st：因为id attribute 对于每个元素都应该是唯一的。你不应该重复它。你应该使用 class name 而不是 id 。

根据您的评论，我在 jquery 中给出了一些示例。

$(document).on('click','.get_data',function(){
 
    name1_val =  $(this).closest('tr').find('.Name1').val();
    name3_val =  $(this).closest('tr').find('.Name3').val();
    
    $(this).closest('tr').find('.Name2').val(name1_val);
    $(this).closest('tr').find('.Name4').val(name3_val);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1px">
<tbody>
<tr>
  <td rowspan="3" style="height:100px;">
Name  <input type="text" name="Emp name"  placeholder="enter your name"  class="Name1"/><br>
ID    <input type="id" name="Emp Id" placeholder="enter id" class="Name3" > </td><br>

<td  style="height:150px;">

<input type="button" value="Get data" class="get_data" /><br>
<label for="text"> Name : <input type="text" class="Name2"></label><br>
<label for="text"> ID   : <input type="id" class="Name4"></label> 

</td></tr> <br>
<tr>
  <td rowspan="3" style="height:100px;">
Name  <input type="text" name="Emp name"  placeholder="enter your name"  class="Name1"/><br>
ID    <input type="id" name="Emp Id" placeholder="enter id" class="Name3" > </td>

<td  style="height:150px;">

<input type="button" value="Get data" class="get_data" /><br>
<label for="text"> Name : <input type="text" class="Name2"></label><br>
<label for="text"> ID   : <input type="id" class="Name4"></label> 

</td></tr>
</tbody>

【讨论】：