简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Ajouter des liens dynamiques aux tableaux HTML AJAX générés par JavaScript
P粉311464935
P粉311464935 2023-09-15 11:20:12
0
1
494

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粉311464935
P粉311464935

répondre à tous(1)
P粉729436537
P粉7294365372023-09-16 09:40:05 1 plancher

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>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！