如何以table形式显示我的信息？

Question

我正在使用 HTML 来显示我的 PHP JSON 编码信息，但我想知道如何在 table 中显示信息？我已经创建了 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>

Answer 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。

如何以table形式显示我的信息？

How to display my information in table form?

html

json

tabular