setAttribute onclick事件未设置并在单击按钮之前运行

Question

我正在通过数组对象，两个字段名称和类创建一个原始表，并且一个提交按钮使用两个按钮的编辑和删除来添加两个字段，当我在单击删除按钮上添加set属性时，它将在事件添加时运行按钮，而不是删除按钮。

我尝试document.getElementById(xyz).setAttribute('onclick', function)不能解决我的问题。

我想在按下del按钮时运行该功能，并且将引发所需的事件。

var arobj = [];

function load(arr) {
  for (var i = 0; i < arr.length; i++) {
    var row = document.createElement("tr");
    var name = document.createElement("td");
    var classN = document.createElement("td");

    var nameValue = document.createTextNode("");
    var classN = document.createTextNode("");
  }
}

function addStudent(idn, idc, tab) {
  var obj = {};

  var row = document.createElement("tr");
  var name = document.createElement("td");
  var classN = document.createElement("td");

  var nameValue = document.createTextNode(
    document.getElementById(idn).value
  );
  obj.nameVal = nameValue;
  var classValue = document.createTextNode(
    document.getElementById(idc).value
  );
  obj.classVal = classValue;

  arobj.push(obj);

  row.setAttribute("id", (arobj.length - 1).toString());

  var del = document.createElement("button");
  del.innerHTML = "delete";
  var edit = document.createElement("button");
  edit.innerHTML = "edit";
  var act = document.createElement("td");

  del.setAttribute("id", "btn" + (arobj.length - 1).toString());
  var delbtn = del.getElementById("btn" + (arobj.length - 1));
  console.log(delbtn);
  act.appendChild(del);

  act.appendChild(edit);
  name.appendChild(nameValue);
  classN.appendChild(classValue);
  row.appendChild(name);
  row.appendChild(classN);
  row.appendChild(act);
  document.getElementById(tab).appendChild(row);
  console.log(arobj);
  console.log(row.getAttribute("id"));
}

function delet() {
  alert("function ran");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="javascript:void(0)" onsubmit="addStudent('name','classN','table');">
  name:
  <input type="text" name="name" id="name" /> <br /> class:
  <input type="text" name="classN" id="classN" /> <br />

  <input type="submit" value="add" />
</form>
<table id="table" border="2px solid black">
  <tr>
    <th>name</th>
    <th>class</th>
    <th>action</th>
  </tr>
</table>

Answer 1

1）使用：

  var delbtn = document.getElementById("btn" + (arobj.length - 1));

代替：

 var delbtn = del.getElementById("btn" + (arobj.length - 1));

2）还添加代码：

del.addEventListener('click', delet);

Answer 2

修改了一些代码，请注意以下注释，顺便说一句：解决此Dom数据时，使用jQuery，react，Vue等库非常有效。

function addStudent(idn, idc, tab) {
    var obj = {};

    var row = document.createElement("tr");
    var name = document.createElement("td");
    var classN = document.createElement("td");

    var nameValue = document.createTextNode(
      document.getElementById(idn).value
    );
    obj.nameVal = nameValue;
    var classValue = document.createTextNode(
      document.getElementById(idc).value
    );
    obj.classVal = classValue;

    arobj.push(obj);

    row.setAttribute("id", (arobj.length - 1).toString());

    var del = document.createElement("button");
    del.innerHTML = "delete";
    var edit = document.createElement("button");
    edit.innerHTML = "edit";
    var act = document.createElement("td");

    del.setAttribute("id", "btn" + (arobj.length - 1).toString());       
    var delbtn = document.getElementById("btn" + (arobj.length - 1));

    // here delbtn is null, it have not add to document yet!;
    console.log('delbtn',delbtn);

    act.appendChild(del);

    act.appendChild(edit);
    name.appendChild(nameValue);
    classN.appendChild(classValue);
    row.appendChild(name);
    row.appendChild(classN);
    row.appendChild(act);
    document.getElementById(tab).appendChild(row);
    console.log(arobj);
    console.log(row.getAttribute("id"));

    // delbtn is ready now;
    delbtn = document.getElementById("btn" + (arobj.length - 1));
    console.log('delbtn',delbtn);   // here is ok

    //add click event
    del.addEventListener("click",delet);
  }

Answer 3

将行添加到DOM之后，需要将事件单击绑定到del按钮：

var arobj = [];
function load(arr) {
for (var i = 0; i < arr.length; i++) {
      var row = document.createElement("tr");
      var name = document.createElement("td");
      var classN = document.createElement("td");

      var nameValue = document.createTextNode("");
      var classN = document.createTextNode("");
    }
}

function addStudent(idn, idc, tab) {
    var obj = {};

    var row = document.createElement("tr");
    var name = document.createElement("td");
    var classN = document.createElement("td");

    var nameValue = document.createTextNode(
      document.getElementById(idn).value
    );
    obj.nameVal = nameValue;
    var classValue = document.createTextNode(
      document.getElementById(idc).value
    );
    obj.classVal = classValue;

    arobj.push(obj);

    row.setAttribute("id", (arobj.length - 1).toString());

    var del = document.createElement("button");
    del.innerHTML = "delete";
    var edit = document.createElement("button");
    edit.innerHTML = "edit";
    var act = document.createElement("td");

    del.setAttribute("id", "btn" + (arobj.length - 1));

    act.appendChild(del);
    act.appendChild(edit);
    name.appendChild(nameValue);
    classN.appendChild(classValue);
    row.appendChild(name);
    row.appendChild(classN);
    row.appendChild(act);
    document.getElementById(tab).appendChild(row);

    document.getElementById("btn" + (arobj.length - 1)).addEventListener('click', delet);
}

function delet() {
    let row = this.parentNode.parentNode;
    row.parentNode.removeChild(row);
    alert("function ran");
}

    <form
      action="javascript:void(0)"
      onsubmit="addStudent('name','classN','table');">
      name:
      <input type="text" name="name" id="name" /> <br />
      class:
      <input type="text" name="classN" id="classN" /> <br />

      <input type="submit" value="add" />
    </form>
    <table id="table" border="2px solid black">
      <tr>
        <th>name</th>
        <th>class</th>
        <th>action</th>
      </tr>
    </table>