在表格中添加和刪除行

Question

我正在嘗試為包含文本框和下拉列表以及每行上的刪除按鈕的表編寫代碼。

當用戶單擊“添加行”時，它將在第一行中添加具有相同元素的另一行。 當用戶單擊“刪除”時，它將刪除該特定行，如下圖所示：

添加和刪​​除行

這是我的代碼：

function deleteRow(r) {
            var i = r.parentNode.parentNode.rowIndex;
            document.getElementById("myTable").deleteRow(i);
        }

       function myCreateFunction(n) {
            var tr = n.parentNode.parentNode.cloneNode(true);
            document.getElementById('myTable').appendChild(tr);
       }

HTML：

<table id="myTable">
        <tr>
          <td >
          <input type="text" style="width:100%" />   
          </td>
      <td>
          <select>
                  <option value="Beginner" >Beginner</option>
                  <option value="Intermediate" >Intermediate</option>
                  <option value="Advanced" >Advanced</option>
              </select>
      </td>
          <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
        </tr>

    </table>

    <input type="button" class="add" value=" Add Row " onclick="myCreateFunction(this)" />

Answer 1

這是因為您不是在克隆tr而是在克隆add row按鈕的父級，而不是tr ，而是克隆其中包含表的父級。 您只需要獲取表的第一行並將其克隆

 function deleteRow(r) { var i = r.parentNode.parentNode.rowIndex; document.getElementById("myTable").deleteRow(i); } function myCreateFunction(n) { var tr = document.getElementsByTagName('tr')[0].cloneNode(true); document.getElementById('myTable').appendChild(tr); } 

 <table id="myTable"> <tr> <td> <input type="text" style="width:100%" /> </td> <td> <select> <option value="Beginner">Beginner</option> <option value="Intermediate">Intermediate</option> <option value="Advanced">Advanced</option> </select> </td> <td><input type="button" value="Delete" onclick="deleteRow(this)"></td> </tr> </table> <input type="button" class="add" value=" Add Row " onclick="myCreateFunction(this)" />