在 jQuery 成功事件上填充 html 表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12048922/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Populate html table on jQuery success event
提问by Solar Confinement
Here's my problem.
这是我的问题。
I have this html table:
我有这个 html 表：
<table class="flexme" id="table" border="1">
<thead>
<tr>
<th width="100">Usuario</th>
<th width="100">Nombre</th>
<th width="100">Apellido</th>
<th width="100">Cedula/Rif</th>
<th width="140">Direccion</th>
<th width="100">E-mail</th>
<th width="100">Telefono1</th>
<th width="100">Telefono2</th>
<th width="100">Status</th>
<th width="150">Acción</th>
</tr>
</thead>
<tbody>
<tr id="test">
<td></td>
</tr>
</tbody>
</table>
and I have this ajax request:
我有这个ajax请求：
$.ajax({
type : "POST",
url : "service.php",
dataType: "json",
data: {
action:"search",
type: 'users',
parameter: parameter,
parameterContent: parameterContent,
},
success:function(data) {
$('#searchResults').show();
var len = data.length;
for (var i = 0; i< len; i++) {
var username = data[i].username;
var name = data[i].uname;
var lastname = data[i].lastname;
}
})
What is the correct way to populate the html table with the info that comes via JSON? I have been trying with no success. I have done tests with append()html()but no success at all, can someone please point me into the right direction?
使用 JSON 提供的信息填充 html 表的正确方法是什么？我一直在尝试但没有成功。我已经做了测试append()html()但根本没有成功，有人可以指出我正确的方向吗？
What I want is to take the info that comes via JSON and populate the table dynamically with this info.
我想要的是获取通过 JSON 提供的信息并使用此信息动态填充表。
回答by Rob Angelier
You could try this:
你可以试试这个：
var table = $("#table tbody");
$.each(data, function(idx, elem){
table.append("<tr><td>"+elem.username+"</td><td>"+elem.name+"</td> <td>"+elem.lastname+"</td></tr>");
});
More information can be found here: http://api.jquery.com/jQuery.each/
更多信息可以在这里找到：http: //api.jquery.com/jQuery.each/
回答by undefined
Try this:
尝试这个：
for (var i = 0; i < len; i++) {
var username = data[i].username;
var name = data[i].name;
var lastname = data[i].lastname;
$('#table tbody').append('<tr><td>'+username+'</td><td>'+name+'</td><td>'+lastname+'</td></tr>')
}
回答by Solar Confinement
Thanks, at the end i did it like this:
谢谢，最后我是这样做的：
$.ajax({
type : "POST",
url : "service.php",
dataType: "json",
data: {
action:"search",
type: 'users',
parameter: parameter,
parameterContent: parameterContent,
},
success:function(data) {
$('#searchResults').show();
var len = data.length;
for (var i = 0; i< len; i++) {
var username = data[i].username;
var name = data[i].name;
var lastname = data[i].lastname;
var idnumber = data[i].idnumber;
var address = data[i].address;
var email = data[i].email;
var phone1 = data[i].phone1;
var phone2 = data[i].phone2;
var active = data[i].active;
$("#generated").append("<tr><td>"+ username +"</td><td>"+ name +"</td><td>"+ lastname +"</td><td>"+ idnumber +"</td><td>"+ address +"</td><td>"+ email +"</td><td>"+ phone1 +"</td><td>"+ phone2 +"</td><td>"+ active +"</td></tr>");
}
}
