javascript - 添加和删​​除表中的行

Question

我正在尝试为一个由文本框和下拉列表以及每行上的删除按钮组成的表格编写代码。

当用户单击“添加行”时，它会添加与第一行具有相同元素的另一行。当用户单击“删除”时，它将删除该特定行，如下图所示:

add and delete row

这是我的代码:

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)" />