我在将选项卡中的JSON输出到HTML表时遇到了麻烦(这是javascript / jQuery夜间课程分配的一部分)。请有人看看,并建议我要对表格格式的输出进行哪些修改?我收到成功警报,但表未填充。
谢谢。
// Tabs
$(function() {
$( "#tabs" ).tabs();
});
// Spanish
$(document).ready(function(){
$.ajax({
url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php", // path to file
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',
success: function () {
alert('success');
}
});
});
function drawTable(data) {
for (var i = 0; i < data.length; i++) {
drawRow(data[i]);
}
}
function drawRow(rowData) {
var row = $("<tr />")
$("#table").append(row);
row.append($("<td>" + rowData.course + "</td>"));
row.append($("<td>" + rowData.name + "</td>"));
row.append($("<td>" + rowData.price + "</td>"));
}
和HTML:
<div id="tabs">
<ol start="50">
<li>
<a href="#tab-1">Italian</a>
</li>
<li>
<a href="#tab-2">Spanish</a>
</li>
</ol>
<p id="tab-1"></p>
<p id="tab-2">
<table id='table'>
<thead>
<tr>
<th>Course</th>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody></tbody>
</table>
</p>
<p id="tab-3"></p>
</div>
代码的主要问题是,在AJAX请求成功完成后,您没有调用任何函数。您至少需要致电drawTable()
才能填充数据。
但是,您可以对代码进行一些改进。首先,删除jsonp: 'callback'
。这是默认值,并且在您提供时也是多余的jsonpCallback
。然后,您也可以更改jsonpCallback
为'drawTable'
。这消除了对success
处理函数的需求,意味着所有请求数据都将直接提供给您的drawTable()
函数。最后,与其在内存中创建DOM元素并在循环的每次迭代中添加追加,不如使用表的所有HTML构建单个字符串并在完成时将其追加一次,要快得多。
话虽如此,请尝试以下操作:
$(document).ready(function() {
$.ajax({
url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php",
dataType: 'jsonp',
jsonpCallback: 'drawTable'
});
});
function drawTable(data) {
var html = '';
for (var i = 0; i < data.length; i++) {
html += '<tr><td>' + data[i].course + '</td><td>' + data[i].name + '</td><td>' + data[i].price + '</td></tr>';
}
$('#table tbody').append(html);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<thead>
<tr>
<th>Course</th>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody></tbody>
</table>
请注意,我将此处显示的HTML缩小为仅相关部分。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句