个人中心
gpt4 book ai didi

javascript - 将链接标签添加到表格中的每一行并打开模态

转载 作者：行者123 更新时间：2023-12-02 22:33:45 26 4
gpt4 key购买 nike

下面是我的 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 lang="en" 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>

最佳答案

就像您在代码中所做的那样，您可以附加 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);

关于javascript - 将链接标签添加到表格中的每一行并打开模态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58807864/

26 4 0
文章推荐： javascript - 根据子值对 Firebase 数据进行排序
文章推荐： c# - 从 IGrouping 中检索所有值
文章推荐： svn - 需要升级和迁移 Subversion 存储库 - 第 22 条军规？
文章推荐： javascript - 将键/值合并到内嵌的response.data中？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com