在 table 中添加和删除行

Question

我正在尝试为 table 编写代码，其中包含一个文本框和一个下拉列表，每行都有一个删除按钮。

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

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，而是其中包含 table 的父按钮。您只需要获取 table 的第一行并克隆它

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

在 table 中添加和删除行

Add and delete row in the table

html

javascript

row

delete-row