如何使用jQuery来更新表 [英] How to update table using jquery
问题描述
我想动态地根据来自Ajax请求做出它返回一个JSON对象的输入接收更新下面的HTML表中的行。
如果我得到一个以上的JSON对象，它增加了在网页上打印的问题。我期待在可能的最佳解决方案，在这种情况下使用jquey动态更新我的表？例如，如果我得到10个对象，我只是想显示5，剩下的，也许下一个网页的链接？有人能指导我，我应该怎么考虑？
JQuery的阿贾克斯
＆LT;脚本＆GT;
$阿贾克斯（{
网址：HTTP：//本地主机/的getData / USSOUTH /'，
异步：假的，
数据类型：JSON，
成功：功能（数据）{
对于（数据变种I）{
VAR USERNAME =数据[I] .USERNAME;
VAR EMAIL =数据[I] .EMAIL;
VAR PASSWORD =数据[I]。密码;
VAR ACTIVE =数据[I]。主动;
}
}
}）;
＆LT; / SCRIPT＆GT;
HTML BODY
＆LT;身体GT;
＆LT; DIV CLASS =包装＆GT;
＆LT; DIV CLASS =表＆GT;
＆LT; DIV CLASS =行头蓝＆GT;
＆LT; DIV CLASS =单元格＆GT;
用户名
＆LT; / DIV＆GT;
＆LT; DIV CLASS =单元格＆GT;
电子邮件
＆LT; / DIV＆GT;
＆LT; DIV CLASS =单元格＆GT;
密码
＆LT; / DIV＆GT;
＆LT; DIV CLASS =单元格＆GT;
活性
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =单元格＆GT;
ninjalug
＆LT; / DIV＆GT;
＆LT; DIV CLASS =单元格＆GT;
misterninja@hotmail.com
＆LT; / DIV＆GT;
＆LT; DIV CLASS =单元格＆GT;
************
＆LT; / DIV＆GT;
＆LT; DIV CLASS =单元格＆GT;
是
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
我还挺简化了code，但你会得到的要点，并可以修改它应用与您的特定code（和我不能做JSON与code段，所以我模拟称为数组变量 jsonData ）
$（文件）。就绪（函数（）{
VAR jsonData = [
{'名'：'名2，电子邮件：email2，内容：内容2}，
{'名'：'NAME3，电子邮件：email3'，'内容'：'content3}，
{'名'：'名称4，电子邮件：email4'，'内容'：'content4}，
{'名'：'name5，电子邮件：email5'，'内容'：'content5}，
{'名'：'name6，电子邮件：email6'，'内容'：'content6}，
{'名'：'name7，电子邮件：email7'，'内容'：'content7}，
{'名'：'name8，电子邮件：email8'，'内容'：'content8'}
]。
$（'加'）。在（'点击'，函数（）{
的console.log（点击）;
VAR长度= jsonData.length;
如果（长度大于5）{长度= 5; } //限5
对于（VAR I = 0; I＆LT;长度;我++）{
VAR克隆= $（'＃模板）的克隆（真）.attr（'身份证'，''）。
clone.find（'名'）HTML（jsonData [I] ['名称']）;
clone.find（'邮件'）HTML（jsonData [一] [电子邮件]）。
clone.find（'内容'）HTML（jsonData [I] ['内容']）;
clone.appendTo（'表'）;
}
}）;
}）;
TD {
边界：1px的纯黑色;
填充：2px的;
}
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/jquery/1.11.0/jquery.min.js"></script>
＆LT; A HREF =＃级=添加＆gt;添加＆LT; / A＆GT;
＆LT;表＆gt;
＆LT; TR ID =模板级=数据行＆GT;
＆LT; TD类=名与GT;名称1＆LT; / TD＆GT;
＆LT; TD类=电子邮件＆GT; Email1＆LT; / TD＆GT;
＆LT; TD类=内容＆GT;内容1＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
I am trying to update the rows of the below html table dynamically based on the input received from ajax request made which returns a JSON object.
If i get more than one json object it becomes an issue to print it on the web page. I am looking at possible best solutions in this case to dynamically update my table using jquey ? For example If i get 10 objects I only want to show 5 and the rest maybe a next page link ? Can someone guide me what should i look into ?
JQuery Ajax
< 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
<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>
i kinda simplified the code, but you'll get the gist and can modify it to apply with your specific code (and i cant do json with code snippet, so i simulated an array variable called 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>
这篇关于如何使用jQuery来更新表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
