我怎樣才能增加輸入控制動態... ??? 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

回答

相關問題