無法在jQuery中以表格形式打印JSON內容
[英]cant print the json content in table form in jquery
問題描述
伙計們，我知道它的假問題，但我已經花了很多時間在這個問題上，但仍然無法達到..我想以表格形式打印json內容..這是我的代碼
[{
"id": 1,
"name": "name1",
"age": 67,
"feedback": "feedback1"
}, {
"id": 2,
"name": "name2",
"age": 30,
"feedback": "feedback2"
}, {
"id": 3,
"name": "name3",
"age": 59,
"feedback": "feedback3"
}, {
"id": 4,
"name": "name4",
"age": 17,
"feedback": "feedback4"
}]
在JavaScript中
$（document）.ready（function（）{$ .ajax（{
url : 'data.json',
error : function(that, e) {
console.log(e);
},
success : function(data) {
$.each(data, function(index1, MyList) {
$.each(MyList, function(index2, item) {
$('body').append('<div id="div'+ index2+'" />');
$('#div' + index2).append(MyList[index2]);
});
});
}
});
});
這是我的輸出
1234
name1name2name3name4
67305917
feedback1feedback2feedback3feedback4
我想以這樣的表格形式制作
1 name1 67 feedback1
2 name2 39 feedback2
3 name3 59 feedback3
4 name4 17 feedback4
3 個解決方案
解決方案1
0 2016-03-13 11:56:00
試試這個代碼片段。您不需要兩個循環。 只需在項目上循環並使用每個項目中的數據構建打包行標記。
data = [{ "id": 1, "name": "name1", "age": 67, "feedback": "feedback1" }, { "id": 2, "name": "name2", "age": 30, "feedback": "feedback2" }, { "id": 3, "name": "name3", "age": 59, "feedback": "feedback3" }, { "id": 4, "name": "name4", "age": 17, "feedback": "feedback4" }] var table_markyp = "<table>"; $.each(data, function(i, v) { table_markyp += '<tr><td>' + v.id + '</td><td>' + v.name + '</td><td>' + v.age + '</td><td>' + v.feedback + '</td><tr>'; }) table_markyp += '</table>'; $('body').append(table_markyp)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
解決方案2
0 2016-03-13 11:58:03
創建一個具有ID的容器，例如<div id="tablecontainer"> ，下面將生成帶有結果的表
如果您想要標題，則可以從數據中獲取一個對象，例如data[0] ，執行Object.keys(data[0])並將其附加到<tr/> <th/>對象，例如下面的row方法
success: function(data) {
var container = $('#tablecontainer');
var table = $('<table></table>');
data.forEach(function(datarow) {
var row = $("<tr />");
for (var item in datarow) {
row.append($("<td>" + datarow[item] + "</td>"));
}
table.append(row);
});
container.append(table);
}
帶有標題的示例輸出：
var data = [{ "id": 1, "name": "name1", "age": 67, "feedback": "feedback1" }, { "id": 2, "name": "name2", "age": 30, "feedback": "feedback2" }, { "id": 3, "name": "name3", "age": 59, "feedback": "feedback3" }, { "id": 4, "name": "name4", "age": 17, "feedback": "feedback4" }]; var container = $('body'); var table = $('<table></table>'); var head = $("<tr />"); var keys = Object.keys(data[0]); keys.forEach(function(key){ head.append($("<th>" + key + "</th>")) }) table.append(head); data.forEach(function(datarow) { var row = $("<tr />"); for (var item in datarow) { row.append($("<td>" + datarow[item] + "</td>")); } table.append(row); }); container.append(table);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
解決方案3
0 2016-03-13 12:04:08
您可以做的是，您必須創建一個HTML結構，以便所有結果都將逐行顯示，並且您可以遵循表結構。
檢查此代碼。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: "data.json",
error : function(that, e) {
console.log(e);
},
success : function(data) {
var Mytable = "<table>";
$.each(data, function(temp, res) {
Mytable +=
'<tr>\n\
<td>' + res.id + '</td>\n\
<td>' + res.name + '</td>\n\
<td>' + res.age + '</td>\n\
<td>' + res.feedback + '</td>\n\
<tr>';
});
Mytable += '</table>';
$('body').append(Mytable);
}
});
});
</script>
</html>
如何使用jQuery打印div內容？ （確保已打印的內容為彩色形式。）
[英]How to print a div content with jquery? (Make sure Printed content will be in colored form.)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.