recherche

Maison  >  Questions et réponses  >  le corps du texte

Ajouter des liens dynamiques aux tableaux HTML AJAX générés par JavaScript

J'utilise JavaScript pour générer un tableau HTML à remplir avec les données d'un fichier AJAX. Je souhaite ajouter dynamiquement des liens dans certaines cellules vers myfile.php. Je vais laisser PHP gérer la demande.

Chaque cellule doit avoir un lien, tous renvoyant à mon fichier PHP, quelque chose comme : 

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

Mais comment ajouter ces liens ?

Prenons cet exemple simple avec seulement deux champs. Je souhaite donc que chaque cellule ait un lien unique afin de pouvoir fournir un autre fichier JSON pour les informations étendues.

J'ai envisagé d'utiliser des instructions conditionnelles pour juger en fonction des clés. 

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

J'ai du mal avec la syntaxe correcte et je n'arrive pas à la faire fonctionner. Durant toutes ces années, je n'ai jamais programmé JavaScript.

Veuillez consulter le code ci-dessous : 

<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粉311464935472 Il y a quelques jours614

répondre à tous(1)je répondrai

  • P粉729436537

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

    Si chaque cellule doit contenir un lien, vous n'avez besoin d'aucune condition. Il vous suffit de modifier le code HTML pour qu'il génère un lien à la fois.

    Démo :

    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>

    répondre
    0
  • Annulerrépondre