克隆表并在按钮后显示

Question

美好的一天社区，我正面临克隆整个表的问题，如果它有克隆几行的解决方案，它将有很大帮助。

如果使用document.getElementsByTagName("table")[2] ; 它可以克隆表格并将其放入正文，因为我正在使用document.body.appendChild(myClone)来做到这一点。

这是一些代码：

解决方案1：

function myFunction() {

      myTable = document.getElementsByTagName("table")[2];  // doesn't use any table id

      myClone = myTable.cloneNode(true);

      var y = document.body.appendChild(myClone);

    }

解决方案2：

function myFunction() {

      var x = document.getElementById("0");  // using this to find auto genereate id for table

      test =  x.cloneNode(true);

    }

html显示：

<table>

     <tr>

      <td>

         <table id="0">

           <tr>

               <td><span></span>Name:<input type="text" value="Tom"/>  </td>

               <td><span> </span>Age:<input type="text" value="25"/>  </td>

               <td><span> </span>Email:<input type="text" value="[e-mail]"/>  </td>

           </tr>

         </table>

     </td>

     </tr>

     <tr>

       <td>

         <table id="1">

           <tr>

               <td><span></span>Name:<input type="text" value="Alice"/>  </td>

               <td><span> </span>Age:<input type="text" value="22"/>  </td>

               <td><span> </span>Email:<input type="text" value="[e-mail]"/>  </td>

           </tr>

         </table>

         <input type="button" onclick="myFunction()"/>

      </td>

     </tr>

  </table>

预期结果 克隆表按钮后，里面的表不会超过5个。请帮忙谢谢。

Answer 1

虽然Dominic Amal Joe F 的回答是在正确的轨道上，但它有一些缺陷，以及 OP 表的结构。我认为这段代码可以正常工作：function myFunction(){&nbsp; // get main table body&nbsp; var tableBody = document.getElementById('mytable').children[0];&nbsp; // get existing rows&nbsp; var rows = tableBody.children.length;&nbsp; // clone the last row (which contains the last table)&nbsp; var newRow = tableBody.children[rows-1].cloneNode(true);&nbsp; // get the new row table&nbsp; var newTable = newRow.children[0].children[0]&nbsp; // change the table id&nbsp; newTable.setAttribute('id', rows);&nbsp; // reset the inputs values&nbsp; var cells = newTable.children[0].children[0].children;&nbsp; for (var i=0; i<cells.length; i++) {&nbsp; &nbsp; cells[i].children[1].value = "";&nbsp; }&nbsp; // append the new row to the main table body&nbsp; tableBody.appendChild(newRow);}<table id="mytable">&nbsp; <tr>&nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; <table id="0">&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><span>Name:</span><input type="text" value="Tom"/></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><span>Age:</span><input type="number" value="25"/></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><span>Email:</span><input type="email" value="[e-mail]"/></td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; </td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; <table id="1">&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><span>Name:</span><input type="text" value="Alice"/></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><span>Age:</span><input type="number" value="22"/></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><span>Email:</span><input type="email" value="[e-mail]"/></td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; </td>&nbsp; </tr></table><button onclick="myFunction()">Clone</button>

Answer 2

我觉得下面的代码会对你有所帮助。HTML<table><button onclick="myFunction()">clone</button><tr>&nbsp; &nbsp; <table id="parent-table">&nbsp; &nbsp; &nbsp; <tr id="parent-row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><span></span>Name:<input type="text" value="Tom"/>&nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><span> </span>Age:<input type="text" value="25"/>&nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><span> </span>Email:<input type="text" value="[e-mail]"/></td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </table></tr></table>JavaScriptfunction myFunction(){&nbsp; let parentTable = document.getElementById("parent-table");&nbsp; let parentRow = document.getElementsByTagName('tr')&nbsp; let clone = parentRow[1].cloneNode(true);&nbsp; &nbsp; &nbsp; parentTable.appendChild(clone)}