Question

我已经在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);
}

Answer 1

您只需要一个.remove()和tr的函数。另外，请确保使用const而不是var进行块作用域而非函数作用域，因为您处于for loop中：

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

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

Answer 2

您可以使用最接近值找到父元素。（这在InternetExplorer中不起作用，有关受支持的浏览器和详细信息，请参见here）
您可以使用节点上的“ addEventListener（'eventType'，{FunctionName}）”函数将事件绑定到元素。 -您可以阅读更多here或here。
1. 在tr元素上运行“删除”功能。

这里是codepen example。

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

使用dom JS删除tr标签

2 个答案: