下面是我的 HTML 文件，其中包含从 JSON 填充的表格的标记。尝试在每一行添加一个链接标签（a href="#"），链接应该有 onClick 事件来打开带有对象内容的模态。它的对象名称、姓氏和年龄我创建了 var link = document.createElement("a")，但不确定如何使用对象行数据追加和打开模式。const data = [{ "id": 1, "name": "John", "surname": "Doe", "age":45, "mobile": "555-555-9876",},{ "id": 2, "name": "Mary", "surname": "Andrew", "age": 31, "mobile": "555-555-3524",},{ "id": 3, "name": "Joe", "surname": "White", "age": 22, "mobile": "555-5555-2453",},]function getUsers(data) {var users = data; var table = document.getElementById("table"); var count = 0; for(use in users){ var row = table.insertRow(count); console.log("row : ", row) var link = document.createElement("a"); link.setAttribute("onclick", function() {}); link.className = "class"; var linkText = document.createTextNode("link"); link.appendChild(linkText); // stuck here row.insertCell(0).innerHTML = users[count].id; row.insertCell(1).innerHTML = users[count].name; row.insertCell(2).innerHTML = users[count].mobile; count++; }}window.onload = getUsers(data);<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Users</title></head><body> <h1>Users</h1> <div> <table > <thead> <tr> <th scope="col">#</th> <th scope="col">name</th> <th scope="col">mobile</th> </tr> </thead> <tbody id="table"> </tbody> </table> <script type="text/javascript" src="./app.js"></script> </div></body></html>
1 回答
九州编程
TA贡献1785条经验 获得超4个赞
就像您已经在代码中所做的那样，您可以附加link到一个元素。在下面的代码中，我已将链接添加到每行 ( row.insertCell(0).appendChild(link);)的第一个单元格，并在使用 ID ( link.innerHTML = users[i].id;)之前填充它。
此外，如果您想onClick在页面加载后创建一个事件侦听器，则必须通过使用.addEventListener而不是创建一个 onClick 属性来显式创建一个。( link.addEventListener("click", function() { ... });)
还有一些其他的小事情：
您可以直接在函数声明中命名变量getUsers(users)（无需var users = data;）
您还可以在循环声明中创建一个迭代变量for (var i = 0; i < users.length; i++) {。这样你只需要一行。（我已替换count为i）。
通过所有这些更改，您的代码将如下所示。剩下的就是创建模态。您可以将数据传递到我放置alert()消息的位置。如果您需要帮助，请查看一些在线资源，例如W3Schools。
// Omitted the data (unchanged)
function getUsers(users) {
var table = document.getElementById("table");
for (var i = 0; i < users.length; i++) {
var row = table.insertRow(i);
console.log("row : ", row)
var link = document.createElement("a");
link.setAttribute('href', '#')
link.addEventListener("click", function() {
alert('Open modal here!');
});
link.className = "class";
link.innerHTML = users[i].id;
row.insertCell(0).appendChild(link);
row.insertCell(1).innerHTML = users[i].name;
row.insertCell(2).innerHTML = users[i].mobile;
row.firstChild.appendChild(link);
}
}
window.onload = getUsers(data);
添加回答
举报
0/150
提交
取消