javascript - 动态将表数据和表行添加到HTML，TD不在HTML中显示

我被困住了。我正在从parse.com检索数据，并尝试将它们动态添加到各自的字段中。我在搞什么？我可以console.log数据，所以我的get请求正在工作。谢谢。

var parseData = function() {

    var orderform = Parse.Object.extend("OrderForm");
    var query = new Parse.Query(orderform);
    query.find({
        success: function (results) {

            var tableRow = $('<tr />', {class: 'tableRows'});
          var restaurantListP = [];
            var tdId = [];
            var tdEmail = [];
            var tdMenuItems = [];
            var tdNotes = [];
            var tdPhoneNumber = [];
            var table = $('#orderTable > tbody');

            function newRow($table, cols){
                $row = $('<tr/>');
                for (var i = 0; i < cols.length; i++) {
                    $col = $('<td/>');
                    $col.append(cols[i]);
                    $row.append($col[i]);
                }
                table.append($row);
            }

            results.forEach(function (r, i) {
               // tdId = $('<td />', { "id": r.id });
                tdEmail = $('<td />', {email_address: r.attributes.email_address });
                tdMenuItems = $('<td />', {menu_items: r.attributes.menu_items });
                tdNotes = $('<td />', {notes: r.attributes.notes});
                tdPhoneNumber = $('<td />', {phone_number: r.attributes.phone_number});

                newRow(table,[tdId,tdEmail,tdMenuItems,tdNotes,tdPhoneNumber]);
               // $('#orderTable > tbody').append(tableRow).append(restaurantListP[0]);

                console.log(tdMenuItems);
                console.log(tdEmail);
            });

http://jsfiddle.net/DaveDH2/tb6d7w81/

最佳答案

有两个主要错误：


id="orderTable"设置为<tbody>，而不是<table>，因此$('#orderTable > tbody')找不到任何内容。您应该将id="orderTable"移到<table>，或将选择器重写到var table = $('#orderTable')。
newRow函数无法正常工作：它将已经创建的<td>与另一个<td>包装在一起，从而使<tr> html代码不正确。该函数应以如下形式重写：

function newRow($table, cols)
{
    var $row = $('<tr/>');
    for (var i = 0; i < cols.length; i++)
    {
        $row.append(cols[i]);
    }
    $table.append($row);
}

Updated fiddle。