0

我在 js 中创建了一个函数，它使用 DOM 方法创建了一个表，然后我添加了一些应该删除相应行的按钮。你能帮我建立一个函数来删除一行吗？这是我的代码

function creaTable(a, b) {
  var tableDiv = document.getElementById("myDynamicTable");
  var tbl = document.createElement('table');
  tbl.setAttribute("id", "tabella");
  var tbdy = document.createElement('tbody');
  tbl.appendChild(tbdy);
  tbl.border = '1';

  for (var j = 0; j < a ; j++) {
    var tr = document.createElement('tr');
    tbdy.appendChild(tr);
    var btnDelete = document.createElement('input');
    btnDelete.setAttribute("type", "button");
    btnDelete.setAttribute("value", "-");
  //  btnDelete.setAttribute("onclick", "delete(tr)");
    tr.appendChild(btnDelete);

  for (var k = 0; k < b ; k++) {
    var td = document.createElement('td');
    td.width = '75';
    td.appendChild(document.createTextNode("Cella "+j+","+k));
    tr.appendChild(td);
    }
  }
  tableDiv.appendChild(tbl);
}
4

2 回答 2

0

你只需要一个函数.remove()就是tr. 还要确保使用const而不是var, 用于块作用域而不是函数作用域，因为您处于for 循环中：

// ...
const tr = document.createElement('tr');
tbdy.appendChild(tr);
const btnDelete = document.createElement('input');
btnDelete.type = "button";
btnDelete.value = "-";
btnDelete.onclick = () => tr.remove();
// ...

您也可以直接分配给元素的属性，而不是setAttribute- 这样，它看起来更干净。

于 2018-09-12T07:55:40.520 回答
-1
  1. 您可以使用最接近的方法来查找父元素。（这在 InternetExplorer 中不起作用，请参阅此处了解支持的浏览器和详细信息）
  2. 您可以使用节点上的“addEventListener('eventType',{FunctionName})”函数将事件绑定到元素。- 您可以在此处或此处阅读更多信息。
    1. 在 tr 元素上运行“删除”功能。

这是一个正在运行的codepen 示例。

//------------------------------------------------------------------
    function creaTable(a, b) {
      var tableDiv = document.getElementById("myDynamicTable");
      var tbl = document.createElement("table");
      tbl.setAttribute("id", "tabella");
      var tbdy = document.createElement("tbody");
      tbl.appendChild(tbdy);
      tbl.border = "1";

      for (var j = 0; j < a; j++) {
        var tr = document.createElement("tr");
        tbdy.appendChild(tr);
        var btnDelete = document.createElement("input");
        btnDelete.setAttribute("type", "button");
        btnDelete.setAttribute("value", "-");
        // register the btn to start a function on click
        btnDelete.addEventListener("click", deleteMyTr);
        tr.appendChild(btnDelete);

        for (var k = 0; k < b; k++) {
          var td = document.createElement("td");
          td.width = "75";
          td.appendChild(document.createTextNode("Cella " + j + "," + k));
          tr.appendChild(td);
        }
      }
      tableDiv.appendChild(tbl);
    }
    creaTable(5, 6);

    // delete function
    function deleteMyTr() {
      // get the closest tr -> this is the btn element
      let tr = this.closest("tr");
      // remove the element
      tr.remove();
    }
于 2018-09-12T08:16:39.470 回答