我正在尝试根据从返回 JSON 对象的 ajax 请求收到的输入动态更新下面的 html 表的行。
如果我获得了多个 json 对象，那么将其打印到网页上就成了一个问题。在这种情况下，我正在寻找可能的最佳解决方案来使用 jQuery 动态更新我的表？例如，如果我得到 10 个对象，我只想显示 5 个，其余的可能是下一页链接？有人可以指导我应该研究什么吗？
jQuery 技术
<script>
$.ajax({
url: 'http://localhost/getData/USSOUTH/',
async: false,
dataType: 'json',
success: function(data) {
for (var i in data) {
var USERNAME = data[i].USERNAME;
var EMAIL = data[i].EMAIL;
var PASSWORD = data[i].PASSWORD;
var ACTIVE = data[i].ACTIVE;
}
}
});
</script>
HTML 正文
<body>
<div class="wrapper">
<div class="table">
<div class="row header blue">
<div class="cell">
Username
</div>
<div class="cell">
Email
</div>
<div class="cell">
Password
</div>
<div class="cell">
Active
</div>
</div>
<div class="row">
<div class="cell">
ninjalug
</div>
<div class="cell">
misterninja@hotmail.com
</div>
<div class="cell">
************
</div>
<div class="cell">
Yes
</div>
</div>
</div>
</div>
</body>
最佳答案
我有点简化了代码，但你会得到要点并可以修改它以适用于你的特定代码(我不能用代码片段做 json，所以我模拟了一个名为 jsonData 的数组变量>)
$(document).ready(function() {
var jsonData = [
{ 'name': 'name2', 'email':'email2', 'content':'content2' },
{ 'name': 'name3', 'email':'email3', 'content':'content3' },
{ 'name': 'name4', 'email':'email4', 'content':'content4' },
{ 'name': 'name5', 'email':'email5', 'content':'content5' },
{ 'name': 'name6', 'email':'email6', 'content':'content6' },
{ 'name': 'name7', 'email':'email7', 'content':'content7' },
{ 'name': 'name8', 'email':'email8', 'content':'content8' }
];
$('.add').on('click', function() {
console.log('click');
var length = jsonData.length;
if (length > 5 ) { length = 5; } //limit to 5
for (var i = 0; i < length; i++) {
var clone = $('#template').clone(true).attr('id', '');
clone.find('.name').html(jsonData[i]['name']);
clone.find('.email').html(jsonData[i]['email']);
clone.find('.content').html(jsonData[i]['content']);
clone.appendTo('table');
}
});
});td {
border:1px solid black;
padding:2px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href="#" class="add">add</a>
<table>
<tr id="template" class="dataRow">
<td class="name">Name1</td>
<td class="email">Email1</td>
<td class="content">Content1</td>
</tr>
</table>关于javascript - 如何使用 jQuery 更新表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28054955/