javascript - 克隆表格并在按钮后显示

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="tom@gmail.com"/>  </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="alice@gmail.com"/>  </td>
           </tr>
         </table>
         <input type="button" onclick="myFunction()"/>
      </td>
     </tr>
  </table>

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

Answer 1

虽然 Dominic Amal Joe F 的答案是在正确的轨道上，但它有一些缺陷，以及 OP 表的结构。我认为这段代码可以正常工作:

function myFunction(){
  // get main table body
  var tableBody = document.getElementById('mytable').children[0];

  // get existing rows
  var rows = tableBody.children.length;

  // clone the last row (which contains the last table)
  var newRow = tableBody.children[rows-1].cloneNode(true);

  // get the new row table
  var newTable = newRow.children[0].children[0]

  // change the table id
  newTable.setAttribute('id', rows);

  // reset the inputs values
  var cells = newTable.children[0].children[0].children;
  for (var i=0; i<cells.length; i++) {
    cells[i].children[1].value = "";
  }

  // append the new row to the main table body
  tableBody.appendChild(newRow);
}

<table id="mytable">
  <tr>
    <td>
      <table id="0">
        <tr>
          <td><span>Name:</span><input type="text" value="Tom"/></td>
          <td><span>Age:</span><input type="number" value="25"/></td>
          <td><span>Email:</span><input type="email" value="tom@gmail.com"/></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table id="1">
        <tr>
          <td><span>Name:</span><input type="text" value="Alice"/></td>
          <td><span>Age:</span><input type="number" value="22"/></td>
          <td><span>Email:</span><input type="email" value="alice@gmail.com"/></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<button onclick="myFunction()">Clone</button>