Question

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

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

＆＃13;

$(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);

});

＆＃13;

<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>

＆＃13;

如何动态增加输入控制...... ??? （java脚本）

1 个答案: