如何使用jQuery来更新表 [英] How to update table using jquery
问题描述
我想动态地根据来自Ajax请求做出它返回一个JSON对象的输入接收更新下面的HTML表中的行。
如果我得到一个以上的JSON对象,它增加了在网页上打印的问题。我期待在可能的最佳解决方案,在这种情况下使用jquey动态更新我的表?例如,如果我得到10个对象,我只是想显示5,剩下的,也许下一个网页的链接?有人能指导我,我应该怎么考虑?
JQuery的阿贾克斯
<脚本>
$阿贾克斯({
网址:HTTP://本地主机/的getData / USSOUTH /',
异步:假的,
数据类型:JSON,
成功:功能(数据){
对于(数据变种I){
VAR USERNAME =数据[I] .USERNAME;
VAR EMAIL =数据[I] .EMAIL;
VAR PASSWORD =数据[I]。密码;
VAR ACTIVE =数据[I]。主动;
}
}
});
< / SCRIPT>
HTML BODY
<身体GT;
< DIV CLASS =包装>
< DIV CLASS =表>
< DIV CLASS =行头蓝>
< DIV CLASS =单元格>
用户名
< / DIV>
< DIV CLASS =单元格>
电子邮件
< / DIV>
< DIV CLASS =单元格>
密码
< / DIV>
< DIV CLASS =单元格>
活性
< / DIV>
< / DIV>
< DIV CLASS =行>
< DIV CLASS =单元格>
ninjalug
< / DIV>
< DIV CLASS =单元格>
misterninja@hotmail.com
< / DIV>
< DIV CLASS =单元格>
************
< / DIV>
< DIV CLASS =单元格>
是
< / DIV>
< / DIV>
< / DIV>
< / DIV>
< /身体GT;
我还挺简化了code,但你会得到的要点,并可以修改它应用与您的特定code(和我不能做JSON与code段,所以我模拟称为数组变量 jsonData code>)
$(文件)。就绪(函数(){
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<长度;我++){
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屋!