Как создать таблицу с AJAX
У меня три списка
Devices = (Mango, Apple, Orange)
Lifetime = (100,200,100)
Status = (Yes, No, Yes)
Эти списки сгруппированы как шаблон
template = {
'Device' : Devices,
'Lifetime' : Lifetime,
'Status' : Status,
}
Мне нужно создать таблицу для веб-интерфейса в AJAX из показанного выше шаблона:
DEvices Lifetime Status
Mango 100 Yes
Apple 200 No
Orange 100 Yes
Как это можно сделать в html со скриптом, используя AJAX?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="wrapper">
%include navbar.tmpl ovVersion=ovVersion, roverMode=roverMode
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Wireless Sensor</h1>
</div>
</div>
<script>
var n_dots = 1;
$( document ).ready(function() {
$.ajax({
dataType: "json",
url: "/wirelessSensor/dag",
success: updateForData,
error: errorOnAjax
});
function updateForData(json) {
$("div").html("<table><tr><th>Devices></th><th>Lifelist</th><th>Status</th></tr>");
$.each(json.devices, function( index, value ) {
$("div").append("<tr><td>" + value + "</td><td>" + json.lifelist[index] + "<td></td><td>" + json.status[index] + "</td></tr>");
});
$("div").html("</table>");
}
function errorOnAjax(jqxhr, status, errorstr) {
var errText = (errorstr == null)
? '' : ', error: ' + errorstr;
console.log('Ajax error: ' + status + errText);
}
});
</script>
</div>
</div>
</body>
</html>
Я пытался делать так. Но думаю, у меня есть проблемы в моем синтаксисе
1 ответ
Используйте jQuery каждой функции для циклического прохождения элементов
$("div").html("<table><tr><th>Fruits></th><th>Price</th><th>Available</th></tr>");
$.each(Fruits, function( index, value ) {
$("div").append("<tr><td>" + value + "</td><td>" + Price[index] + "<td></td><td>" + Available[index] + "</td></tr>");
});
$("div").html("</table>");