将链接标签添加到表格中的每一行并打开模态
下面是我的 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>
MYYA1回答
-
九州编程
就像您已经在代码中所做的那样，您可以附加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);
随时随地看视频慕课网APP
相关分类
JavaScript