動態添加表格數據和表格行到HTML，TD不顯示在HTML中

我被卡住了。我從parse.com中檢索數據並嘗試將它們動態添加到它們各自的字段中。我在搞什麼？我可以console.log數據，所以我的請求正在工作。謝謝。動態添加表格數據和表格行到HTML，TD不顯示在HTML中

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/

來源

2014-08-31 David Trinh

jsfiddle你可以在左邊的「外部資源」複製粘貼鏈接點擊「+」圖標鏈接 – caramba 2014-08-31 06:46:51

在你的表中'tbody'有'id = orderTable'，並且你試圖獲得'var table = $（'＃orderTable> tbody'）;'這不會給任何東西，比如說'var table = $（'＃orderTable'）;'讓我知道。 – Mritunjay 2014-08-31 06:56:27

主要有兩大錯誤：

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。

來源

2014-08-31 07:01:24 Regent

動態添加表格數據和表格行到HTML，TD不顯示在HTML中

回答

相關問題