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

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

您的代码非常好。刚刚犯了2个错误。

只需要调整你的 JavaScript 就可以了。

    
    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);
    }

    <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 2

在您的 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 3

将deleteRow 函数添加到新创建的按钮可以正常工作，即使应该避免使用内联函数。如果有人知道更优雅的方式，请告诉我。

    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);
    }

<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>