如何使用HTML表从json创建表
如何使用HTML表从json创建表
提问于 2017-07-04 00:49:58
我们使用api从MySQL数据库检索数据，并将其转换为json文件类型。将数据放入HTML表的最佳方法是什么。
这是api：https://nauticmc.com/dev/top.php?type=kills&start=0&end=9
根据您更改的类型，它将改变数据的升序，也就是说，Kills将首先显示死亡的高度、数量。
$(document).ready(function () {
var json = [{"uuid":"ba6df9ff-84fa-464b-a231-d36782a7fdba","username":"zFrost87","kills":"19","deaths":"6","broken":"34","placed":"34","fish":"15","onlinetime":"9493","mobskilled":"6","crops":"1"},{"uuid":"b07762f3-38a4-45b7-9f21-6147704aee4b","username":"frechette456","kills":"3","deaths":"11","broken":"33","placed":"61","fish":"0","onlinetime":"1251","mobskilled":"1","crops":"7"},{"uuid":"83af0a86-7c09-4c32-8fa5-65db3c50b4cf","username":"MineManFrost","kills":"1","deaths":"2","broken":"16","placed":"1","fish":"0","onlinetime":"238","mobskilled":"0","crops":"0"},{"uuid":"71cb5612-d586-4390-ad78-05d295d6d2bd","username":"Nikolassparrow","kills":"0","deaths":"2","broken":"1","placed":"2","fish":"0","onlinetime":"30","mobskilled":"0","crops":"0"},{"uuid":"c34f51b5-8f2a-4e08-8b83-99d5faf21ea9","username":"SetupS1CK","kills":"0","deaths":"0","broken":"0","placed":"0","fish":"0","onlinetime":"81","mobskilled":"0","crops":"0"},{"uuid":"80212863-9466-4a4b-852e-5812e77d075b","username":"PickCottonNig","kills":"0","deaths":"0","broken":"0","placed":"0","fish":"0","onlinetime":"835","mobskilled":"0","crops":"0"},{"uuid":"a64de20f-91e7-4bb0-80db-4f7f1614d693","username":"OstenGaming","kills":"0","deaths":"0","broken":"1","placed":"0","fish":"0","onlinetime":"213","mobskilled":"0","crops":"0"},{"uuid":"25c60209-9fd4-42b8-a2b7-d78e01c0b3ae","username":"OpTc","kills":"0","deaths":"0","broken":"0","placed":"0","fish":"0","onlinetime":"9","mobskilled":"0","crops":"0"},{"uuid":"3a1dc4c7-e9ec-425e-ad50-54ae37c5f1a7","username":"AutoDolphin","kills":"0","deaths":"11","broken":"20","placed":"1","fish":"0","onlinetime":"444","mobskilled":"0","crops":"0"}];
var tr;
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + json[i].username + "</td>");
tr.append("<td>" + json[i].kills + "</td>");
tr.append("<td>" + json[i].deaths + "</td>");
tr.append("<td>" + json[i].broken + "</td>");
tr.append("<td>" + json[i].placed + "</td>");
tr.append("<td>" + json[i].fish + "</td>");
tr.append("<td>" + json[i].onlinetime + "</td>");
tr.append("<td>" + json[i].mobskilled + "</td>");
tr.append("<td>" + json[i].crops + "</td>");
$('table').append(tr);
}
});
我现在使用Local，因为Ajax不允许跨域访问，但我会将其解析为var来获得它。
我还希望人们能够在我尝试使用datatables.js的每一列中通过相应的箭头看到数据顶部的数据，但效果不太好。
这只是没有js或json的桌子。
https://strixdesigns.com/Stats1/ <我希望箭头像这样工作
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-07-04 01:01:47
为什么不使用datatable并设置如下选项呢?在json字段计数上，您的头字段必须相同
HTML
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Username</th>
<th>Kills</th>
....
</tr>
</thead>
</table>JQUERY
$(document).ready(function() {
$('#example').DataTable( {
"ajax": {
"url": "https://nauticmc.com/dev/top.php?type=kills&start=0&end=9",
"type": "POST",
"data":{
'type': 'kills',
'start': 0,
'end': 9
}
},
"columns": [
{ "data": "username " },
{ "data": "kills " },
...
]
} );
} );查看这里的文档：flat.html
Stack Overflow用户
发布于 2017-07-04 01:13:43
另一种方法是将所需的顺序存储在数组中，并将嵌套循环添加到逻辑中。这里的优点是，您可以将订单更改为任何您想要的(username最后，第三，等等)您的标记将不必更改以适应字段的重新排序。
$(document).ready(function () {
var json = [{"uuid":"ba6df9ff-84fa-464b-a231-d36782a7fdba","username":"zFrost87","kills":"19","deaths":"6","broken":"34","placed":"34","fish":"15","onlinetime":"9493","mobskilled":"6","crops":"1"},{"uuid":"b07762f3-38a4-45b7-9f21-6147704aee4b","username":"frechette456","kills":"3","deaths":"11","broken":"33","placed":"61","fish":"0","onlinetime":"1251","mobskilled":"1","crops":"7"},{"uuid":"83af0a86-7c09-4c32-8fa5-65db3c50b4cf","username":"MineManFrost","kills":"1","deaths":"2","broken":"16","placed":"1","fish":"0","onlinetime":"238","mobskilled":"0","crops":"0"},{"uuid":"71cb5612-d586-4390-ad78-05d295d6d2bd","username":"Nikolassparrow","kills":"0","deaths":"2","broken":"1","placed":"2","fish":"0","onlinetime":"30","mobskilled":"0","crops":"0"},{"uuid":"c34f51b5-8f2a-4e08-8b83-99d5faf21ea9","username":"SetupS1CK","kills":"0","deaths":"0","broken":"0","placed":"0","fish":"0","onlinetime":"81","mobskilled":"0","crops":"0"},{"uuid":"80212863-9466-4a4b-852e-5812e77d075b","username":"PickCottonNig","kills":"0","deaths":"0","broken":"0","placed":"0","fish":"0","onlinetime":"835","mobskilled":"0","crops":"0"},{"uuid":"a64de20f-91e7-4bb0-80db-4f7f1614d693","username":"OstenGaming","kills":"0","deaths":"0","broken":"1","placed":"0","fish":"0","onlinetime":"213","mobskilled":"0","crops":"0"},{"uuid":"25c60209-9fd4-42b8-a2b7-d78e01c0b3ae","username":"OpTc","kills":"0","deaths":"0","broken":"0","placed":"0","fish":"0","onlinetime":"9","mobskilled":"0","crops":"0"},{"uuid":"3a1dc4c7-e9ec-425e-ad50-54ae37c5f1a7","username":"AutoDolphin","kills":"0","deaths":"11","broken":"20","placed":"1","fish":"0","onlinetime":"444","mobskilled":"0","crops":"0"}];
var tr, th;
var order = ['username', 'kills', 'deaths', 'broken', 'placed', 'fish', 'onlinetime', 'mobskilled', 'crops'];
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
th = $('<tr/>');
if (i === 0) { // create table headers
for (var j = 0; j < order.length; j++) {
th.append("<th>" + order[j] + "</th>");
$('table').append(th)
}
}
for (var j = 0; j < order.length; j++) {
tr.append("<td>" + json[i][order[j]] + "</td>");
$('table').append(tr);
}
}
});table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
text-shadow: 1px 1px 0px #fff;
background:#eaebec;
margin:20px;
border:#ccc 1px solid;
border-radius:3px;
box-shadow: 0 1px 2px #d1d1d1;
display: block;
max-width: 100%;
overflow: auto;
}
table th {
padding:21px 25px 22px 25px;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
background: -moz-linear-gradient(top, #ededed, #ebebeb);
}
table th:first-child {
text-align: left;
padding-left:20px;
}
table tr:first-child th:first-child {
border-top-left-radius:3px;
}
table tr:first-child th:last-child {
border-top-right-radius:3px;
}
table tr {
text-align: center;
padding-left:20px;
}
table td:first-child {
text-align: left;
padding-left:20px;
border-left: 0;
}
table td {
padding:18px;
border-top: 1px solid #ffffff;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}
table tr.even td {
background: #f6f6f6;
background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
}
table tr:last-child td {
border-bottom:0;
}
table tr:last-child td:first-child {
border-bottom-left-radius:3px;
}
table tr:last-child td:last-child {
border-bottom-right-radius:3px;
}
table tr:hover td {
background: #f2f2f2;
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table></table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44895491
复制相关文章
相似问题
腾讯云开发者
