如何创建表与AJAX
问题描述:
我有三个列表如何创建表与AJAX
Devices = (Mango, Apple, Orange)
Lifetime = (100,200,100)
Status = (Yes, No, Yes)
这些列表分组为模板
template = {
'Device' : Devices,
'Lifetime' : Lifetime,
'Status' : Status,
}
我需要显示上面的模板在AJAX来创建Web界面表:
DEvices Lifetime Status
Mango 100 Yes
Apple 200 No
Orange 100 Yes
这怎么可以在html中使用脚本使用AJAX完成?
<!DOCTYPE html>
</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>
我试图做这样的。但你猜我在语法问题
答
使用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>");
+0
我试着运行这个内部的脚本标记,但得到错误。 – NTP
+0
你有什么错误,给我看你的代码 –
你应该看看[这里](http://*.com/questions/1413952/how-为你的答案创建一个新的表与行使用jquery和包装里面的div)。 – Catman155