在jQuery成功事件上填充html表 [英] Populate html table on jQuery success event

问题描述

我有这个html表格：

 < table class =flexmeid =tableborder =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>电子邮件< / th> 
< th width =100> Telefono1< / th> 
< th width =100> Telefono2< / th> 
< th width =100>状态< / th> 
< th width =150> Acci& oacute; n< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr id =test> 
< td>< / td> 
< / tr> 
< / tbody> 
< / table> 
  

我有这个ajax请求：

 $。ajax（{
 type：POST，
 url：service.php，
 dataType：json，
数据：{
 action：search，
 type：'users'，
 parameter：parameter，
 parameterContent：parameterContent，
}，
成功：函数（数据）{
 $（'＃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; 
 
 
 
 
 
 $ b 
填充html表格的正确方法是来自JSON的信息？我一直在尝试没有成功。我已经完成了 append（）  html（）的测试，但没有成功，有人可以请我指出正确的方向吗？
 
 
 
我想要的是通过JSON来获取信息，并使用此信息动态填充表格。 
解决方案
您可以试试这个： 
 
 
  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>）; 
}）; 
  
更多信息可以在这里找到：
  http://api.jquery.com/jQuery.each/  
 
Here's my problem.

I have this html table:
<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&oacute;n</th>
    </tr>
  </thead>
  <tbody>
    <tr id="test">
      <td></td>
    </tr>
   </tbody>
</table>
and I have this ajax request:
$.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?

What I want is to take the info that comes via JSON and populate the table dynamically with this info. 
解决方案
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/

                        
这篇关于在jQuery成功事件上填充html表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！