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>

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="tom@gmail.com"/></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)
}

克隆表并在按钮后显示

2 个答案: