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

Question

我卡住了。我正在从 parse.com 检索数据并尝试将它们动态添加到各自的字段中。我在搞什么鬼？我可以控制台记录数据，所以我的获取请求正在运行。谢谢。

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/

Answer 1

主要有两个错误:

1. id="orderTable"设置为 <tbody> ，而不是<table> , 所以 $('#orderTable > tbody')什么也没找到。你应该移动id="orderTable"至 <table> , 或将选择器重写为 var table = $('#orderTable') .

2. 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 .