输入表单表：行末尾的动态创建删除按钮不起作用

Question

单击“插入行”时，我无法为此动态创建的行生成“删除”按钮。有人知道原因吗？

我想这是因为deleteRow()函数需要一个行索引，该行索引尚未在行创建时定义。但我不知道如何规避这个问题。

我想避免使用jQuery。任何帮助表示赞赏。

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

function insertRow(r) {
  var table = document.getElementById("myTable")
  var row = table.insertRow(-1);

  var type = ["text",           "text",         "number",     "number"];
  var name = ["crypto_ticker",  "crypto_name",  "crypto_qty", "crypto_invested_sum"];
  var placeholder = ["e.g. BTC","e.g. Bitcoin", "e.g. 5",     "e.g. 2000"];
  var required = ["true",       "true",         "true",        "true"];

  for (n=0;n<4;n++) {
    var cell=row.insertCell(n);
    var t=document.createElement("input");
      t.type = type[n];
      t.name = name[n];
      t.placeholder = placeholder[n];
      t.required = required[n];
    cell.appendChild(t);
  }

  var cell1=row.insertCell(4);
  var button=document.createElement("button");
    button.id = "myButton";
    button.textContent = "Click me";
    button.addEventListener("click", deleteRow(this), true);
  cell1.appendChild(button);

}

<table id="myTable">
  <caption>Übersicht der Coins</caption>
    <thead>
      <tr>
        <th>Ticker</th>
        <th>Name</th>
        <th>Anzahl</th>
        <th>Investierte Summe</th>
        <th>Löschen</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input type="text" name="crypto_ticker" value="BTC" placeholder="e.g. BTC" required="true"/>
        </td>
        <td>
          <input type="text" name="crypto_name" value="Bitcoin" placeholder="e.g. Bitcoin" required="true"/>
        </td>
        <td>
          <input type="number" name="crypto_qty" value="5" placeholder="e.g. 5" required="true"/>
        </td>
        <td>
          <input type="number" name="crypto_invested_sum" value="3000" placeholder="e.g. 2000" required="true"/>
        </td>
        <td> 
          <button onclick="deleteRow(this)">Delete</button>
        </td>
      </tr>
      <tr>
        <td>
          <input type="text" name="crypto_ticker" value="ETH" placeholder="e.g. BTC" required="true"/>
        </td>
        <td>
          <input type="text" name="crypto_name" value="Ethereum" placeholder="e.g. Bitcoin" required="true"/>
        </td>
        <td>
          <input type="number" name="crypto_qty" value="5" placeholder="e.g. 5" required="true"/>
        </td>
        <td>
          <input type="number" name="crypto_invested_sum" value="3000" placeholder="e.g. 2000" required="true"/>
        </td>
        <td> 
          <button onclick="deleteRow(this)">Delete</button>
        </td>
      </tr>
    </tbody>
</table>

<button onclick="insertRow()">Insert Row</button>

Answer 1

在你的deleteRow（）函数中你可以使用它来引用你的按钮（你点击的按钮）。然后按照树直到要删除的TR

function deleteRow() {
  var row = this.parentNode.parentNode;
  console.log(row);
  row.parentNode.removeChild(row);
}

function deleteRow() {
  console.log(this)
  var row = this.parentNode.parentNode;
  console.log(row);
  row.parentNode.removeChild(row);
}

function insertRow(r) {
  var table = document.getElementById("myTable")
  var row = table.insertRow(-1);

  var type = ["text", "text", "number", "number"];
  var name = ["crypto_ticker", "crypto_name", "crypto_qty", "crypto_invested_sum"];
  var placeholder = ["e.g. BTC", "e.g. Bitcoin", "e.g. 5", "e.g. 2000"];
  var required = ["true", "true", "true", "true"];

  for (n = 0; n < 4; n++) {
    var cell = row.insertCell(n);
    var t = document.createElement("input");
    t.type = type[n];
    t.name = name[n];
    t.placeholder = placeholder[n];
    t.required = required[n];
    cell.appendChild(t);
  }

  var cell1 = row.insertCell(4);
  var button = document.createElement("button");
  button.class = "myButton";
  button.textContent = "Click me";
  button.addEventListener("click", deleteRow, true);
  cell1.appendChild(button);

}

<table id="myTable">
  <caption>Übersicht der Coins</caption>
  <thead>
    <tr>
      <th>Ticker</th>
      <th>Name</th>
      <th>Anzahl</th>
      <th>Investierte Summe</th>
      <th>Löschen</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" name="crypto_ticker" value="BTC" placeholder="e.g. BTC" required="true" />
      </td>
      <td>
        <input type="text" name="crypto_name" value="Bitcoin" placeholder="e.g. Bitcoin" required="true" />
      </td>
      <td>
        <input type="number" name="crypto_qty" value="5" placeholder="e.g. 5" required="true" />
      </td>
      <td>
        <input type="number" name="crypto_invested_sum" value="3000" placeholder="e.g. 2000" required="true" />
      </td>
      <td>
        <button onclick="deleteRow()">Delete</button>
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" name="crypto_ticker" value="ETH" placeholder="e.g. BTC" required="true" />
      </td>
      <td>
        <input type="text" name="crypto_name" value="Ethereum" placeholder="e.g. Bitcoin" required="true" />
      </td>
      <td>
        <input type="number" name="crypto_qty" value="5" placeholder="e.g. 5" required="true" />
      </td>
      <td>
        <input type="number" name="crypto_invested_sum" value="3000" placeholder="e.g. 2000" required="true" />
      </td>
      <td>
        <button onclick="deleteRow()">Delete</button>
      </td>
    </tr>
  </tbody>
</table>

<button onclick="insertRow()">Insert Row</button>

Answer 2

将 function deleteRow(r) { var i = r.parentNode.parentNode.rowIndex; document.getElementById("myTable").deleteRow(i); } function insertRow(r) { var table = document.getElementById("myTable") var row = table.insertRow(-1); var type = ["text", "text", "number", "number"]; var name = ["crypto_ticker", "crypto_name", "crypto_qty", "crypto_invested_sum"]; var placeholder = ["e.g. BTC","e.g. Bitcoin", "e.g. 5", "e.g. 2000"]; var required = ["true", "true", "true", "true"]; for (n=0;n<4;n++) { var cell=row.insertCell(n); var t=document.createElement("input"); t.type = type[n]; t.name = name[n]; t.placeholder = placeholder[n]; t.required = required[n]; cell.appendChild(t); } var cell=row.insertCell(4); var b = document.createElement("input"); b.type = "button"; b.value = "Delete"; b.onclick = function() { var i = b.parentNode.parentNode.rowIndex; document.getElementById("myTable").deleteRow(i); }; cell.appendChild(b); }函数权限添加到新创建的按钮可以正常工作，即使应该避免使用内联函数。如果有人知道更优雅的方式，请告诉我。

＆＃13;

＆＃13;

<table id="myTable">
  <caption>Übersicht der Coins</caption>
    <thead>
      <tr>
        <th>Ticker</th>
        <th>Name</th>
        <th>Anzahl</th>
        <th>Investierte Summe</th>
        <th>Löschen</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input type="text" name="crypto_ticker" value="BTC" placeholder="e.g. BTC" required="true"/>
        </td>
        <td>
          <input type="text" name="crypto_name" value="Bitcoin" placeholder="e.g. Bitcoin" required="true"/>
        </td>
        <td>
          <input type="number" name="crypto_qty" value="5" placeholder="e.g. 5" required="true"/>
        </td>
        <td>
          <input type="number" name="crypto_invested_sum" value="3000" placeholder="e.g. 2000" required="true"/>
        </td>
        <td> 
          <button onclick="deleteRow(this)">Delete</button>
        </td>
      </tr>
      <tr>
        <td>
          <input type="text" name="crypto_ticker" value="ETH" placeholder="e.g. BTC" required="true"/>
        </td>
        <td>
          <input type="text" name="crypto_name" value="Ethereum" placeholder="e.g. Bitcoin" required="true"/>
        </td>
        <td>
          <input type="number" name="crypto_qty" value="5" placeholder="e.g. 5" required="true"/>
        </td>
        <td>
          <input type="number" name="crypto_invested_sum" value="3000" placeholder="e.g. 2000" required="true"/>
        </td>
        <td> 
          <button onclick="deleteRow(this)">Delete</button>
        </td>
      </tr>
    </tbody>
</table>

<button onclick="insertRow()">Insert Row</button>

＆＃13;

submitting

＆＃13;

＆＃13;

＆＃13;

Answer 3

你的代码非常好。刚犯了两个错误。

只需要调整你的JavaScript＆amp;它工作正常。

＆＃13;

＆＃13;

    
    function insertRow(r){
      var table = document.getElementById("myTable")
      var row = table.insertRow(-1);
    
      var type = ["text",           "text",         "number",     "number"];
      var name = ["crypto_ticker",  "crypto_name",  "crypto_qty", "crypto_invested_sum"];
      var placeholder = ["e.g. BTC","e.g. Bitcoin", "e.g. 5",     "e.g. 2000"];
      var required = ["true",       "true",         "true",        "true"];
    
      for (n=0;n<4;n++) {
        var cell=row.insertCell(n);
        var t=document.createElement("input");
          t.type = type[n];
          t.name = name[n];
          t.placeholder = placeholder[n];
          t.required = required[n];
        cell.appendChild(t);
      }
    
      var cell1=row.insertCell(4);
      var button=document.createElement("button");
        button.textContent = "Delete";
        button.onclick = function(){deleteRow(this);};
      cell1.appendChild(button);
    
    }
    function deleteRow(r){
        r.parentNode.parentNode.parentNode.removeChild(r.parentNode.parentNode);
    }

＆＃13;

    <table id="myTable">
      <caption>Übersicht der Coins</caption>
        <thead>
          <tr>
            <th>Ticker</th>
            <th>Name</th>
            <th>Anzahl</th>
            <th>Investierte Summe</th>
            <th>Löschen</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <input type="text" name="crypto_ticker" value="BTC" placeholder="e.g. BTC" required="true"/>
            </td>
            <td>
              <input type="text" name="crypto_name" value="Bitcoin" placeholder="e.g. Bitcoin" required="true"/>
            </td>
            <td>
              <input type="number" name="crypto_qty" value="5" placeholder="e.g. 5" required="true"/>
            </td>
            <td>
              <input type="number" name="crypto_invested_sum" value="3000" placeholder="e.g. 2000" required="true"/>
            </td>
            <td> 
              <button onclick="deleteRow(this)">Delete</button>
            </td>
          </tr>
          <tr>
            <td>
              <input type="text" name="crypto_ticker" value="ETH" placeholder="e.g. BTC" required="true"/>
            </td>
            <td>
              <input type="text" name="crypto_name" value="Ethereum" placeholder="e.g. Bitcoin" required="true"/>
            </td>
            <td>
              <input type="number" name="crypto_qty" value="5" placeholder="e.g. 5" required="true"/>
            </td>
            <td>
              <input type="number" name="crypto_invested_sum" value="3000" placeholder="e.g. 2000" required="true"/>
            </td>
            <td> 
              <button onclick="deleteRow(this)">Delete</button>
            </td>
          </tr>
        </tbody>
    </table>
    
    <button onclick="insertRow()">Insert Row</button>

＆＃13;

＆＃13;

＆＃13;