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

在表格中添加和删除行

1 个答案: