Javascript 将链接标记添加到表中的每一行并打开模式

下面是我的HTML文件，其中包含从JSON填充的带有表的标记

尝试在每一行上添加链接标记a href=，该链接应具有onClick事件以打开包含其对象内容的模式。其对象名称、姓氏和年龄

我创建了var link=document.createElementa，但不确定如何使用对象行数据追加和打开模式

常数数据=[ { id:1， 姓名：约翰， 姓：多伊， 年龄:45,， 手机号码：555-555-9876， }, { id:2， 姓名：玛丽， 姓：安德鲁， 年龄:31岁， 手机号码：555-555-3524， }, { id:3， 姓名：乔， 姓白,， 年龄:22,， 手机号码：555-5555-2453， }, ] 函数getUsersdata{ var用户=数据； var table=document.getElementByIdtable； var计数=0； 用于用户{ var row=table.insertRowcount； console.logrow:，第行 var link=document.createElementa； link.setAttributeonclick，函数{}； link.className=class； var linkText=document.createTextNodelink； link.appendChildlinkText； //困在这里 row.insertCell0.innerHTML=用户[count].id； row.insertCell1.innerHTML=用户[count].name； row.insertCell2.innerHTML=users[count].mobile； 计数++； } } window.onload=getUsersdata； 使用者 使用者 名称 可移动的

---

就像您已经在代码中做的一样，您可以将链接附加到元素。在下面的代码中，我已将链接添加到每行的第一个单元格。insertCell0.appendChildlink；并在执行此操作之前将其填充为ID link.innerHTML=users[i].ID

此外，如果要在加载页面后创建类似onClick的eventListener，则必须使用.addEventListener而不是创建onClick属性来显式创建一个。link.addEventListenerclick，函数{…}

还有其他一些小事情：

您可以在函数声明中直接命名变量getUsersusers，无需var users=data； 您还可以在VARI=0的循环声明中创建一个迭代变量；i<用户长度；i++{。这样你只需要一行。我用i替换了count。 通过所有这些更改，您的代码将与下面的代码类似。剩下的就是创建模式。您可以将数据传递到我放置警报消息的位置。如果您需要帮助，请查看一些在线资源，如

---

您实际上不需要使用JS FIDLE，您可以使用Insert按钮右侧的按钮将HTML/CSS/JS片段添加到您的帖子中。

// 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);