克隆表并在按钮后显示

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(){

  // 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="[e-mail]"/></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="[e-mail]"/></td>

        </tr>

      </table>

    </td>

  </tr>

</table>

<button onclick="myFunction()">Clone</button>

Answer 2

我觉得下面的代码会对你有所帮助。

HTML

<table>

<button onclick="myFunction()">clone</button>

<tr>

    <table id="parent-table">

      <tr id="parent-row">

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

</tr>

</table>

JavaScript

function myFunction(){

  let parentTable = document.getElementById("parent-table");

  let parentRow = document.getElementsByTagName('tr')

  let clone = parentRow[1].cloneNode(true);

      parentTable.appendChild(clone)

}