Question

我正在尝试以表格格式发布我的json结果应该如何实现。结果为

我希望它以表格格式显示。这是我的代码

  <html>
  <head>
   <script language="javascript" type="text/javascript" src="jquery.js">  </script>
  </head>
  <body>
<h3>Output: </h3>
<div id="output">this element will be accessed by jquery and this text    replaced</div>

 <script id="source" language="javascript" type="text/javascript">

 $(function () 
 {
  $.ajax({                                      
  url: 'example.php',              
  data: "",                        

  dataType: 'json',                  
  success: function(data)        

        {   
  var html = "";
  for(var i = 0; i < data.length; i++){
  var uid = data[i].uid;             
  var firstname = data[i].firstname;       
  var lastname = data[i].lastname;
  var email = data[i].email;
  var username = data[i].username;
  var password = data[i].password;

  html += "<b>uid: </b>"+uid+"<b> firstname:   </b>"+firstname+"<b>  lastname: </b>"+lastname+"<b> email: </b>"+email+"<b> username: </b>"+username+"<b> password: </b>"+password; 
  }
$("#output").html( html );

  } 
  });
 }); 
 </script>
 </body>
</html>

输出存储在var html中我应该将其转换为表格格式。

Answer 1

我希望你的意思。

尝试：

var html = "<table>";
html += "<thead>";
html += "<tr>";
html += "<th>Uid</th>";
html += "<th>Firstname</th>";
html += "<th>Lastname</th>";
html += "<th>Email</th>";
html += "<th>Username</th>";
html += "<th>Password</th>";
html += "<tr>";
html += "</thead>";
html += "<tbody>";
for (var i = 0; i < data.length; i++) {
 var uid = data[i].uid;
 var firstname = data[i].firstname;
 var lastname = data[i].lastname;
 var email = data[i].email;
 var username = data[i].username;
 var password = data[i].password;
 html += "<tr>";
 html += "<td>" + uid + "</td>";
 html += "<td>" + firstname + "</td>";
 html += "<td>" + lastname + "</td>";
 html += "<td>" + email + "</td>";
 html += "<td>" + username + "</td>";
 html += "<td>" + password + "</td>";
 html += "</tr>";
}
html += "</tbody>";
$("#output").html(html);

Answer 2

只需将此部分代码更改为格式表格而不是粗体文字：

...
var html = "<table>";
html += "<thead><tr><th>UID</th><th>First Name</th><th>Last Name</th><th>Email</th><th>Username</th><th>Password</th></tr></thead>";
html += "<tbody>";
for(var i = 0; i < data.length; i++){
    html += "<tr>";

    var uid = data[i].uid;             
    var firstname = data[i].firstname;       
    var lastname = data[i].lastname;
    var email = data[i].email;
    var username = data[i].username;
    var password = data[i].password;

    html += "<td>"+uid+"</td><td>"+firstname+"</td><td>"+lastname+"</td><td>"+email+"</td><td>"+username+"</td><td>"+password+"</td></tr>"; 
}
html +="</tbody></table>";
...

Answer 3

您可以直接在Javascript中创建表格，也可以在返回JSON数据的PHP脚本中创建表格，但是由于您没有向我们展示您的PHP脚本，我们将按照以下方式使用Javascript路线：

<script id="source" language="javascript" type="text/javascript">

$(function ()  {
    $.ajax({                                      
        url     : 'example.php',              
        data    : "",
        dataType: 'json',                  
        success : function(data) {   
            var html  = "<table class='data-tbl'>";
                html += "<tr class='data-head-row'>";
                html += "<th class='data-head-cell'>UID</th>";
                html += "<th class='data-head-cell'>First Name</th>";
                html += "<th class='data-head-cell'>Last Name</th>";
                html += "<th class='data-head-cell'>Email</th>";
                html += "<th class='data-head-cell'>Username</th>";
                html += "<th class='data-head-cell'>Password</th>";
                html += "</tr>";
                html += "<tbody class='data-content-body'>";
            for(var i = 0; i < data.length; i++){
                var uid = data[i].uid;             
                var firstname  = data[i].firstname;       
                var lastname   = data[i].lastname;
                var email      = data[i].email;
                var username   = data[i].username;
                var password   = data[i].password;

                html    += "<tr class='data-content-row'>";
                html    += "<td class='data-content-cell'>" + uid + "</td>"; 
                html    += "<td class='data-content-cell'>" + firstname + "</td>";
                html    += "<td class='data-content-cell'>" + lastname + "</td>";
                html    += "<td class='data-content-cell'>" + email + "</td>";
                html    += "<td class='data-content-cell'>" + username + "</td>";
                html    += "<td class='data-content-cell'>" + password + "</td>";
                html    += "</tr>";
            }
            html        += "</tbody>";
            html        += "</table>";
            $("#output").html( html );

         } 
     });
 }); 
 </script>

如何以表格格式转换我的结果

3 个答案: