为由JavaScript生成的AJAX HTML表格添加动态链接
P粉311464935
P粉311464935 2023-09-15 11:20:12
0
1
584

我正在使用JavaScript生成HTML表格,用来填充来自AJAX文件的数据。我想要动态地在某些单元格中添加链接,链接到myfile.php。我将让PHP处理请求。

每个单元格都应该有一个链接,都链接回我的PHP文件,类似于:

<a href="myfile.php?data=单元格值">点击这里</a>

但是,我该如何添加这些链接呢?

以这个简单的示例为例,只有两个字段。所以我希望每个单元格都有一个唯一的链接,以便我可以为扩展信息提供另一个JSON文件。

我考虑使用条件语句,根据键来判断。

if (index == 'username') {
    添加链接
} else {
    .....
}

我在正确的语法上遇到了问题,我无法让它工作。这些年来,我从未编程过JavaScript。

请查看下面的代码:

<HTML>
    ...

    <script>
    var data = [
        {
            "id": "3",
            "username": "foo",
            "email": "hhh@hhh.com"
        },
        {
            "id": "9",
            "username": "foobarbam",
            "email": null
        },
        {
            "id": "10",
            "username": "bar",
            "email": "bar@proton.me"
        },
        {
            "id": "11",
            "username": "bam",
            "email": null
        },
        {
            "id": "12",
            "username": "snoopy",
            "email": null
        },
        {
            "id": "15",
            "username": "rogerwaters",
            "email": "barbam@proton.me"
        }
   ];

   var keys = [];

   document.write("<table><tr>");
   var tr;
    for (var i = 0; i < data.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + data[i].username + "</td>");
        tr.append("<td>" + data[i].email + "</td>");
        
        $('table').append(tr);
    }

    document.write("</table>");
    </script>
</body>

P粉311464935
P粉311464935

全部回复(1)
P粉729436537

如果每个单元格都应包含一个链接,那么您不需要任何条件。您只需修改HTML,使其每次输出一个链接。

演示:

var data = [{
    "id": "3",
    "username": "foo",
    "email": "hhh@hhh.com"
  },
  {
    "id": "9",
    "username": "foobarbam",
    "email": null
  },
  {
    "id": "10",
    "username": "bar",
    "email": "bar@proton.me"
  },
  {
    "id": "11",
    "username": "bam",
    "email": null
  },
  {
    "id": "12",
    "username": "snoopy",
    "email": null
  },
  {
    "id": "15",
    "username": "rogerwaters",
    "email": "barbam@proton.me"
  }
];

document.write("<table><tr>");
var tr;
for (var i = 0; i < data.length; i++) {
  tr = $('<tr/>');
  tr.append("<td><a href='myfile.php?data=" + data[i].username + "'>" + data[i].username + "</a></td>");
  tr.append("<td><a href='myfile.php?data=" + data[i].email + "'>" + data[i].email + "</a></td>");

  $('table').append(tr);
}

document.write("</table>");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板