在 jQuery 成功事件上填充 html 表答案

【问题标题】：Populate html table on jQuery success event在 jQuery 成功事件上填充 html 表
【发布时间】：2012-08-16 10:45:10
【问题描述】：

这是我的问题。

我有这个 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&oacute;n</th>
    </tr>
  </thead>
  <tbody>
    <tr id="test">
      <td></td>
    </tr>
   </tbody>
</table>

我有这个 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;

   }
})

使用来自 JSON 的信息填充 html 表的正确方法是什么？我一直在尝试没有成功。我已经用append()html() 进行了测试，但根本没有成功，有人可以指点我正确的方向吗？

我想要的是获取通过 JSON 提供的信息并使用此信息动态填充表格。

【问题讨论】：

你试过load()吗？ api.jquery.com/load
能否请您显示从 JSON 响应中准备 TR 的代码 sn-p？以及您是如何尝试将它们添加到 TBODY 中的？
你知道datatables.net吗？

标签： jquery html ajax html-table

【解决方案1】：

你可以试试这个：

    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/

【讨论】：

【解决方案2】：

试试这个：

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>')
}

【讨论】：

【解决方案3】：

谢谢，最后我这样做了：

  $.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>");

                                }

                            }

【讨论】：

如果您希望我们以后回答您的问题，我建议您将其中一个回复标记为答案，我们将不胜感激。
@RobAngelier 对不起，我只是没有注意到它，无论如何我粘贴了我的代码，以便它可以帮助遇到同样问题的人，谢谢！

【解决方案4】：

$(document).ready(function() {
  $.ajax({
    type: 'GET',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*'
    },
    url: 'https://localhost:44387/api/employee/employeelist',
    dataType: "json",
    success: function(data) {
      var employeeTable = $('#tblEmployee tbody');
      employeeTable.empty();
      $('#tblEmployee').show();
      var len = data.length;
      for (var i = 0; i < len; i++) {
        var EmpId = data[i].EmpId;
        var FirstName = data[i].FirstName;
        var LastName = data[i].LastName;
        var Contact = data[i].Contact;
        var Address = data[i].Address;
        var Gender = data[i].Gender;
        var Salary = data[i].Salary;
        var Gender = data[i].Gender;
        var ActiveHours = data[i].ActiveHours;
        var Remark = data[i].Remark;
        var IsAvailable = data[i].IsAvailable;
        var Hiredate = data[i].Hiredate;
        var IsActive = data[i].IsActive;
        employeeTable.append('<tr><td>' + EmpId + '</td><td>' +
          FirstName + '</td><td>' + LastName + '</td><td>' + Contact +
          '</td><td>' + Address + '</td><td>' + Gender +
          '</td><td>' + Salary + '</td><td>' + ActiveHours +
          '</td><td>' + Remark + '</td><td>' + IsAvailable +
          '</td><td>' + Hiredate + '</td><td>' + IsActive +
          '</td><td><button type="button" class="btn btn-sm btn-primary editingTRbutton fas fa-pencil-alt noUnderlineCustom text-white" data-toggle="modal" data-target="#editModal">' + 'Edit' + '</button>' + '</td></tr>');
      }

    },
    error: function(err) {
      alert(err);
    }
  })
});

HTML

<form id="Employeeform">
  <div class="container">
    <table id="tblEmployee" class="paginated table table-bordered">
      <thead class="bg-primary text-white">
        <tr>
          <th>ID</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Contact</th>
          <th>Address</th>
          <th>Gender</th>
          <th>Salary</th>
          <th>ActiveHours</th>
          <th>Remark</th>
          <th>IsAvailable</th>
          <th>Hiredate</th>
          <th>IsActive</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody id="tabldata"></tbody>
    </table>
  </div>
</form>

【讨论】：