简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Fügen Sie dynamische Links zu AJAX-HTML-Tabellen hinzu, die von JavaScript generiert wurden
P粉311464935
P粉311464935 2023-09-15 11:20:12
0
1
578

Ich verwende JavaScript, um eine HTML-Tabelle zu generieren, die mit Daten aus einer AJAX-Datei gefüllt wird. Ich möchte dynamisch Links in bestimmten Zellen zu myfile.php hinzufügen. Ich lasse PHP die Anfrage bearbeiten.

Jede Zelle sollte einen Link haben, der alle auf meine PHP-Datei verweist, etwa: 

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

Aber wie füge ich diese Links hinzu?

Nehmen Sie dieses einfache Beispiel mit nur zwei Feldern. Daher möchte ich, dass jede Zelle einen eindeutigen Link hat, damit ich eine weitere JSON-Datei für die erweiterten Informationen bereitstellen kann.

Ich habe darüber nachgedacht, bedingte Anweisungen zu verwenden, um anhand von Schlüsseln zu beurteilen. 

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

Ich habe Probleme mit der korrekten Syntax und schaffe es nicht, sie zum Laufen zu bringen. In all den Jahren habe ich noch nie JavaScript programmiert.

Bitte beachten Sie den folgenden Code: 

<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

Antworte allen(1)
P粉729436537
P粉7294365372023-09-16 09:40:05 1 Etage

如果每个单元格都应包含一个链接，那么您不需要任何条件。您只需修改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>
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！