如何以表格形式显示我的信息?

时间:2016-02-04 03:19:09

标签: html json tabular

我正在使用HTML来显示我的PHP JSON编码信息,但我想知道如何在表格中显示信息?我已经创建了PHP,它只是一个简单的数组,显示了一个人的名字,姓氏和电子邮件。



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
    <script src="https://getfirebug.com/firebug-lite-debug.js"></script>

    <title></title>
</head>
<body>

<!-- this UL will be populated with the data from the php array -->
<ul></ul>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script type='text/javascript'>
    $(document).ready(function(){
        // call the php that has the php array which is json_encoded
        $.getJSON('Test.php', function(data) {
            // data will hold the php array as a javascript object
            console.log(data);
            $.each(data, function(key, val) {
                $('ul').append('<li id="' + key + '">' + val.first_name + ' ' + val.last_name + ' ' + val.email + '</li>');
            });
        });

    });
</script>

</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>

    <title></title>
</head>
<body>

<!-- JSON goes to <tbody> -->
<table>
<thead>
<tr><th>Key</th><th>Name and Email</th></tr>
</thead>
<tbody>
</tbody>
</table>

<script type='text/javascript'>
    $(document).ready(function(){
        // call the php that has the php array which is json_encoded
        $.getJSON('Test.php', function(data) {
            // data will hold the php array as a javascript object
            $.each(data, function(key, val) {
                $('tbody').append('<tr><td>' + key + '</td><td>' + val.first_name + ' ' + val.last_name + ' ' + val.email + '</td></tr>');
            });
        });

    });
</script>

您可以像这样附加JSON。