演示

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 s超级无效。您应该更改所有克隆上的#id或取消克隆节点上的#id，并使用类，标签，属性等。

在此演示中，我将表单控件'#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>

如何使用Javascript克隆表中的a

1 个答案:

演示