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,但是无法理解这个概念。
这是我的小项目的文件之一。执行项目时,我将获得注册页面,并在输入用户数据后以表格格式显示在仪表板中。每当我添加用户数据时,我都想在每个条目中添加编辑按钮。谁能帮我。