為由JavaScript產生的AJAX HTML表格新增動態鏈接
P粉311464935
P粉311464935 2023-09-15 11:20:12
0
1
589

我正在使用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>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板