我怎样才能增加输入控制动态... ??? js

我用循环来复制我的表到n次。“复制（）”代码只能在第一个表上工作。我不知道为什么。Kindly帮我解决this.Here是我JS提琴......（请参阅我的完整代码小提琴）我怎样才能增加输入控制动态... ??? js

的代码不是wrks就是我下面提及。

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

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

    <tr id="p001"> 
     <td colspan="10" style="border:1px solid #ffffff;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>

来源

2017-06-22 Bala_Poyyamoli

我没有得到你。你能否重写你的问题描述？ –

如果你需要动态输入字段，也许你可以使用它们作为数组：https://stackoverflow.com/questions/1010941/html-input-arrays – Mic

我已更新我的description.please通过我的jsfiddle哥们。 –

嘿，我不知道这是你想要的。

var num,i,y; 
 
function cloneRow() { 
 
num=document.getElementById("copying number").value; 
 

 

 
for(i=0;i<num-1;i++) 
 
{ 
 
    var row = document.getElementById("rowToClone"); 
 
    var table = document.getElementById("tableToModify"); 
 
    var clone = row.cloneNode(true); 
 
    clone.id = "newID"; 
 
    table.appendChild(clone); 
 

 
}  
 
     function createRow() { 
 
     var row = document.createElement('tr'); 
 
     var col = document.createElement('td'); 
 
     var col2 = document.createElement('td'); 
 
     row.appendChild(col);  
 
     row.appendChild(col2); 
 
     var table = document.getElementById("tableToModify"); 
 
     table.appendChild(row); 
 
     } 
 
     
 
    } 
 
    
 
    
 
    function copy(selector) { 
 
     var text1 = document.getElementById(selector + "1").value; 
 
     document.getElementById(selector + "2").value = text1; 
 
     var text2 = document.getElementById(selector + "3").value; 
 
     document.getElementById(selector + "4").value = text2; 
 
     }

table { 
 
    border-collapse: collapse  
 
} 
 

 
td { 
 
    border: 1px solid black;height:100%; 
 
} 
 
p001{ 
 
border:none;} 
 

 
table{counter-reset:section;} 
 
.count:before 
 
{ 
 
counter-increment:section; 
 
content:counter(section); 
 
}

<!Doctype HTML> 
 

 
<body> 
 
    <form> 
 
    <h4>Enter the number of times to be copied</h4> 
 
    <input type="text" id="copying number" placeholder="Enter Here"> 
 
    <input type="reset" value="clear"> 
 
    </form> 
 
    <br> 
 
<br> 
 
    <input type="submit" value="Copy row" onclick="cloneRow()"> 
 
    
 
    <br><br> 
 
    
 
    
 
<table width="100%" id="tableToModify" > 
 
<tbody id="rowToClone"> 
 

 

 
<tr > 
 
<td colspan="5" style="border:2px solid black;height:50px;text-align:center;">header 
 
</tr> 
 

 
<tr> 
 
    <td style="height:25px;width:11%;text-align:center;" class="count" >Name</td> 
 
    
 
    <td colspan="3"style="width:11%;height:100px;text-align:center;">Age</td> 
 
    <td style="width:11%;text-align:center;">Gender</td> 
 
    
 
</tr> 
 
    
 
<tr> 
 
    
 
    
 
    
 
    <td rowspan="3" style="height:100px;"><pre>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" > </pre></td> 
 

 

 

 

 
    
 
    <td></td> 
 
    <td></td> 
 
    <td ></td> 
 
    
 
    
 
    <td rowspan="3"> <pre> 
 
    <input type="radio" name="Gender" value="male">MALE</input> 
 
    <input type="radio" name="Gender" value="female">FEMALE</input> <br> <input type="radio" name="Gender" value="other">OTHER</input> 
 
    </pre></td> 
 
    
 
    
 
</tr> 
 

 
<tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
</tr> 
 
<tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
</tr> 
 
<tr id="p01"> 
 
    <td></td> 
 
    <td colspan="4"style="height:100px"></td> 
 
    
 
    
 
</tr> 
 
<tr><td colspan="5" style="height:50px;text-align:center;"> 
 
footer</td> 
 
    
 
</tr> 
 

 
<tr id="p001"> 
 
<td colspan="10" style="border:1px solid #ffffff;height:150px;"><input type="button" value="Get data" onclick="copy('Name');"/><pre><label for="text"> Name : <input type="text" id="Name2"></label> 
 
<label for="text"> ID : <input type="id" id="Name4"></label> </pre></td></tr> 
 

 

 
</tbody> 
 

 
</table> 
 
</body> 
 
</head> 
 
</html>

来源

2017-06-22 09:52:59

我的问题是函数“copy（）”只在第一个表中运行，不能在随后的复制表中工作。这里（你的回答）也是相同的概率继续 –

var text1 = document.getElementById选择器+“1”）。 document.getElementById（selector +“2”）。value = text1;' –

'var text1 = document.getElementById（selector +“1”）。value; document.getElementById（selector +“2”）。value = text1;'每次代码评估它将替换模板行中的值。如果使用getElementById方法，它会从DOM返回第一个元素。您不应该将DOM具有相同ID的元素！想象一下具有相同ID号码的人！为什么评论会在堆栈中产生痛苦？ –

我怎样才能增加输入控制动态... ??? js

回答

相关问题