如何在jQuery中將json數據轉換為html表？

Question

我在jQuery中有以下代碼：

                    $.ajax({
                        url: './getJson.php', 
                        type: "POST",
                        data: {
                            email: email
                        },
                        dataType:'text',
                        success: function(response)
                        {
                            alert(response)
                        }
                    });

在網頁上運行后，我看到一個帶有json數據的彈出窗口，其結構如下：

[{"number":"1","id":"2","price":"100.70","date":"2015-10-18 03:00:00"},
{"number":"2","id":"2","price":"88.20","date":"2015-10-18 04:00:00"}]

當用戶進入我的頁面時，就會發生這種情況。 相反，我想用該數據填充html表，並且已經准備好布局（到目前為止已填充虛擬數據）：

                        <div class="panel-body">
                            <div class="dataTable_wrapper">
                                <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                    <thead>
                                        <tr>
                                            <th>number</th>
                                            <th>id</th>
                                            <th>price</th>
                                            <th>date</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="odd gradeX">
                                            <td>Trident</td>
                                            <td>Internet Explorer 4.0</td>
                                            <td>Win 95+</td>
                                            <td class="center">4</td>
                                        </tr>
                                        <tr class="even gradeC">
                                            <td>Trident</td>
                                            <td>Internet Explorer 5.0</td>
                                            <td>Win 95+</td>
                                            <td class="center">5</td>
                                        </tr>
                                        <tr class="odd gradeA">
                                            <td>Trident</td>
                                            <td>Internet Explorer 5.5</td>
                                            <td>Win 95+</td>
                                            <td class="center">5.5</td>
                                        </tr>

現在我的問題是-我該如何用從json提取的我自己的偽數據替換並始終將其顯示為用戶的漂亮表？ 謝謝！

Answer 1

1. 使用$.parseJSON （或JSON.parse ）解析JSON字符串或設置dataType : 'json'
2. 使用$.each()解析的對象
3. 生成帶有內容的tr並使用appendTo()或append()將其附加到表中。

 var data = '[{"number":"1","id":"2","price":"100.70","date":"2015-10-18 03:00:00"},{"number":"2","id":"2","price":"88.20","date":"2015-10-18 04:00:00"}]'; json = JSON.parse(data); $.each(json, function(i, v) { $('<tr/>', { html: [$('<td/>', { text: v.number }), $('<td/>', { text: v.id }), $('<td/>', { text: v.price }), $('<td/>', { text: v.date })] }).appendTo('#dataTables-example tbody') }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="panel-body"> <div class="dataTable_wrapper"> <table class="table table-striped table-bordered table-hover" id="dataTables-example"> <thead> <tr> <th>number</th> <th>id</th> <th>price</th> <th>date</th> </tr> </thead> <tbody> </tbody> </table>