下面是我的 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>
九州编程
相关分类