动态地将表数据和表行添加到HTML,TD不以HTML格式显示

时间:2014-08-31 06:43:20

标签: javascript jquery parse-platform html-table

我被困住了。我正在从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/

1 个答案:

答案 0 :(得分:2)

有两个主要错误:

  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);
    }
    
  3. Updated fiddle

相关问题