Question

我用循环将我的表复制到n次。这是一个＆＃34; copy（）＆＃34;代码仅适用于第一桌。我知道为什么。请帮助我解决这个问题。这是我的小提琴......（请参阅我的小提琴完整代码）

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

Answer 1

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

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>

如何动态增加输入控制... ??? js

1 个答案: