search

Home  >  Q&A  >  body text

Add dynamic links to AJAX HTML tables generated by JavaScript

I'm using JavaScript to generate an HTML table to populate with data from an AJAX file. I want to dynamically add links in certain cells to myfile.php. I'll let PHP handle the request.

Each cell should have a link, all linked back to my PHP file, similar to: 

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

But how do I add these links?

Take this simple example, with only two fields. So I want each cell to have a unique link so that I can provide another JSON file for the extended information.

I consider using conditional statements to judge based on keys. 

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

I'm having trouble with the correct syntax and I can't get it to work. In all these years, I've never programmed JavaScript.

Please view the code below: 

<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粉311464935P粉311464935527 days ago666

reply all(1)I'll reply

  • P粉729436537

    P粉7294365372023-09-16 09:40:05

    If every cell should contain a link, then you don't need any conditions. You just need to modify the HTML so that it outputs one link at a time.

    Demo:

    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>

    reply
    0
  • Cancelreply