如何动态添加编辑按钮

时间:2019-02-25 18:23:01

标签: javascript

window.onload = function() {
  console.log('request calling');
  var xhttp = new XMLHttpRequest();
  xhttp.open("POST", "/dashboardUsers", false);
  xhttp.send();
  var response = JSON.parse(xhttp.responseText);
  console.log(response);
  var table = document.getElementById("targettable");

  var btnEdit = document.createElement('button');
  btnEdit.innerHTML = "Edit";


  for (var i = 0; i < response.length; i++) {
    console.log("dashboard")
    console.log(response[i]);
    var tr = document.createElement("tr");

    var td = document.createElement("td");
    var td1 = document.createElement("td");
    var td2 = document.createElement("td");
    var td3 = document.createElement("td");
    var td4 = document.createElement("td");
    var td5 = document.createElement("td");

    var txt1 = document.createTextNode(response[i].name);
    console.log(txt1);
    var txt2 = document.createTextNode(response[i].email);
    console.log(txt2);
    var txt3 = document.createTextNode(response[i].password);
    console.log(txt3);
    var txt4 = document.createTextNode(response[i].contact);
    console.log(txt4);

    td1.appendChild(txt1);
    td2.appendChild(txt2);
    td3.appendChild(txt3);
    td4.appendChild(txt4);

    tr.appendChild(td);
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    tr.appendChild(td4);

    table.appendChild(tr);
  }
};
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
<center>
  <h1 style="margin-top: 250px;">Users List </h1>
  <div>
    <br><br>
    <form action="/signup" method="get" class="box login">
      <input type="submit" class="btnLogin" value="Add User" tabindex="4">
    </form>
    <br><br>
    <table id="targettable">
      <tr>
        <th></th>
        <th>Name</th>
        <th>Email</th>
        <th>Password</th>
        <th>Contact</th>
        <th>Actions</th>
      </tr>
    </table>
    <br><br>
  </div>
</center>

我想向此JavaScript代码动态添加编辑按钮。我试图了解JavaScript中动态按钮的概念。我当然通过了Google,但是无法理解这个概念。

这是我的小项目的文件之一。执行项目时,我将获得注册页面,并在输入用户数据后以表格格式显示在仪表板中。每当我添加用户数据时,我都想在每个条目中添加编辑按钮。谁能帮我。

0 个答案:

没有答案