如何將變量數據顯示到 html 表中
[英]How show a variable data into html table
問題描述
我有 2 個 html 文件，它們的名稱是index1.php & index11.php 。 index11.php將 json 數據顯示到 html 表中。 我希望我的index1.php給出與index11現在給出的結果相同的結果。 請編輯或進行一些更改，以便它提供所需的結果。 現在index1.php只顯示 json 數據。 而且我不知道以表格格式顯示的下一步。
索引1.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello</title>
<script src="jsencode.js"></script>
<script>
function display() {
var request = new XMLHttpRequest();
request.open("GET", "crc.php");
request.onreadystatechange = function () {
var aa = this.responseText;
document.write(aa);
/**
*
* here i dont know how do next steps
*
**/
};
request.send();
}
</script>
</head>
<body>
<div id="result">
</div>
<h1 id="head">Welcome to Our Website</h1>
<div class="wrapper">
<div class="profile">
<button onclick="display()">Click here to Get Courses</button>
<div class="head">
<h1 style="margin-left:35%;margin-right:auto;:block;margin-top:2%;margin-bottom:0%"></h1>
</div>
<table id="category" width="100%">
<thead>
</thead>
<tbody>
</tbody>
</table>
</tr>
</div>
</div>
</body>
</html>
index11.php
<html>
<header>
<title>Welcome</title>
</header>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function display() {
$(function () {
$.getJSON('crc.php', function (data) {
$.each(data.liveClasses, function (i, f) {
var link = "index3.php?id=" + f.Id;
var tblRows = "<tr>" + "<td>" + "Name" + "</td>" + "<td>" + f.Id + "</td>" + "</tr>" + "<tr>" + "<td>" + "Info" + "</td>" + "<td>" + f.messageName + "</td>" + "</tr>" + "<tr>" + "<td>" + "Link" + "</td>" + "<td><a target='_blank' href='" + link + "'>" + "Get INFO" + "</a></td>" + "</tr>" + "<tr>" + "<td>" + "Teacher" + "</td>" + "<td>" + f.date + "</td>" + "</tr>" + "<tr>" + "<td>" + "Is Live Now" + "</td>" + "<td>" + (f.liveClassStatus === '2' ? 'Yes' : 'No') + "</td>" + "</tr>" + "<tr>" + "<td>" + "-" + "</td>" + "<td>" + "-" + "</td>" + "</tr>";
$(tblRows).appendTo("#category tbody");
});
});
});
}
</script>
<h1 id="head">Welcome to Our Website</h1>
<div class="wrapper">
<div class="profile">
<button onclick="display()">Click here to Get Courses</button>
<div class="head">
<h1 style="margin-left:35%;margin-right:auto;:block;margin-top:2%;margin-bottom:0%"></h1>
</div>
<table id="category" width="100%">
<thead> </thead>
<tbody> </tbody>
</table>
</tr>
</div>
</div>
</body>
</html>
2 個解決方案
解決方案1
0 2019-11-13 04:38:09
在您的index11.php中，您有：
$.each(data.liveClasses , function(i, f) {
var link ="index3.php?id="+ f.Id;
var tblRows = "<tr>" + "<td>" + "Name" + "</td>" + "<td>" + f.Id + "</td>" + "</tr>" + "<tr>" + "<td>" + "Info" + "</td>" + "<td>" + f.messageName + "</td>" + "</tr>" +"<tr>" + "<td>" + "Link" + "</td>" +"<td><a target='_blank' href='"+link+"'>"+"Get INFO"+"</a></td>" + "</tr>" + "<tr>" + "<td>" + "Teacher" + "</td>" + "<td>" + f.date + "</td>" + "</tr>" + "<tr>" + "<td>" + "Is Live Now" + "</td>" + "<td>" + (f.liveClassStatus ==='2' ? 'Yes' :'No') + "</td>" + "</tr>" + "<tr>" + "<td>" + "-" + "</td>" + "<td>" + "-" + "</td>" + "</tr>" ;
$(tblRows).appendTo("#category tbody");
});
});
在本節中，您從其他來源獲得的數據保存在變量data中。 之后，它將遍歷數據，append html 代碼包含每一行數據。
但是在您的index1.php中，您剛剛顯示了原始數據，而沒有將其插入正確的 html 代碼中：
var aa = this.responseText;
document.write(aa); // this is when you show the raw data
要解決此問題，您可以嘗試以下步驟：
- 將結果解析為 JSON：
var data = JSON.parse(aa); - 從
index11.php復制代碼：
$.each(data.liveClasses , function(i, f) { // liveClasses is a property of data
var link ="index3.php?id="+ f.Id;
var tblRows = "<tr>" + "<td>" + "Name" + "</td>" + "<td>" + f.Id + "</td>" + "</tr>" + "<tr>" + "<td>" + "Info" + "</td>" + "<td>" + f.messageName + "</td>" + "</tr>" +"<tr>" + "<td>" + "Link" + "</td>" +"<td><a target='_blank' href='"+link+"'>"+"Get INFO"+"</a></td>" + "</tr>" + "<tr>" + "<td>" + "Teacher" + "</td>" + "<td>" + f.date + "</td>" + "</tr>" + "<tr>" + "<td>" + "Is Live Now" + "</td>" + "<td>" + (f.liveClassStatus ==='2' ? 'Yes' :'No') + "</td>" + "</tr>" + "<tr>" + "<td>" + "-" + "</td>" + "<td>" + "-" + "</td>" + "</tr>" ;
$(tblRows).appendTo("#category tbody");
});
});
注意：我不知道您的 JSON 響應文本的詳細信息，因此如果您在使用這些代碼時遇到問題，請確保您在該 JSON 中使用了正確的屬性。
解決方案2
0 2019-11-13 04:44:23
只是循環數據：
let jsonData= [{id: 1, name: "jhon"}, {id: 2, name: "jane"}]
jsonData.forEach((d) => {
$("#app").append(`<p>${d.name}</p>`)
})
如何以百分比顯示HTML表數據
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.