javascript - 如何使用 Javascript 克隆表中的 <tr>

Question

我想复制第二个 <tr>每次我单击“添加”按钮时，正如此处所示，我的意思是，每当我单击该按钮时，我都想添加一个新的 <tr>将添加与前一个执行相同操作的操作。

<form id="frm1" action="Calculate.html">
<table id= "myTable">
    <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
    </tr>
    <tr id= "rowToClone">
        <td>
            <select id= "products">
                <option value="80">Product-A</option>
                <option value="80">Product-B</option>
                <option value="80">Product-C</option>
                <option value="80">Product-D</option>
                <option value="16">Product-E</option>       
            </select>
        </td>
        <td><input type="number" id="ndc" placeholder=""></td>
        <td><p id="ndpc"></p></td>
        <td><p id="pu"></p></td>
        <td><p id="ptpp"></p></td>
    </tr>
</table>
<input type="button" onclick="Calculate()" value="calculate">
<input type="button" onclick="AddSelect()" value="Add">

我希望它做同样的事情，我尝试过，但在我坚持的第二部分中从未成功

first part:
        function Calculate() {
              var e = document.getElementById("products");
              var productValue = e.options[e.selectedIndex].value;
              document.getElementById("ndpc").innerHTML = productValue;
              document.getElementById("ndpc").value = productValue;
              if (e.selectedIndex === 0){
                document.getElementById("pu").value = 21.2; 
              }
              else if (e.selectedIndex === 1) {
                  document.getElementById("pu").value = 25.7;   
                }
                else if (e.selectedIndex === 2 || e.selectedIndex === 3 ) {
                  document.getElementById("pu").value = 14; 
                }               
                else {
                  document.getElementById("pu").value = 6;
                }
              var pu = document.getElementById("pu").value;
              document.getElementById("pu").innerHTML = pu;
              var ndc = document.getElementById("ndc").value;
              var ndpc = document.getElementById("ndpc").value;
              var Result = ndc * ndpc * pu;
              document.getElementById("ptpp").innerHTML = Result;
 };

我要解决的第二部分:

        function AddSelect(){
            var row = document.getElementbyId("rowToClone");  
            var table = document.getElementById("myTable");   
            var clone = row.cloneNode(true);                    
            clone.id = "New";                              
            function createRow() {
            //I don't know what to do.
 } };

我显然是 Javascript 新手，请帮助我。

Answer 1

当使用 cloneNode() 等方法时，或createElement()你需要将新节点附加到 DOM 中，否则它就会漫无目的地漂浮。另外，在克隆节点时，请记住它和/或其子节点是否有任何 #ids ，你最终会重复 #id这是 super 无效的。您应该更改 #id所有克隆上的 s 或删除 #id克隆节点上的 s 并使用类、标签、属性等代替。

在这个演示中，我替换了表单控件'#id与name属性，因为这就是您从 <form> 提交值所需的全部内容。到服务器(当然还有 <input type='submit'> 按钮)。

演示

function addSelect() {
  var T = document.getElementById('xTable');

  var R = document.querySelectorAll('tbody .row')[0];

  var C = R.cloneNode(true);

  T.appendChild(C);

}

<form id="frm1" action="Calculate.html">
  <table id="xTable">
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
      </tr>
    </thead>
    <tr class="row">
      <td>
        <select name="products">
                <option value="80">Product-A</option>
                <option value="80">Product-B</option>
                <option value="80">Product-C</option>
                <option value="80">Product-D</option>
                <option value="16">Product-E</option>       
            </select>
      </td>
      <td><input type="number" name="ndc" placeholder=""></td>
      <td>
        <p id="ndpc"></p>
      </td>
      <td>
        <p id="pu"></p>
      </td>
      <td>
        <p id="ptpp"></p>
      </td>
    </tr>
  </table>


  <input type="button" onclick="addSelect()" value="Add">
</form>