JQuery appendTo не работает

Question

var rows = 10; //here's your number of rows and columns 
var cols = 23; 
var table = $('<table id="tbl"><tbody>'); 
for (var r = 0; r < rows; r++) { 
    var tr = $('<tr class="datarow">'); 
    for (var c = 0; c < cols; c++) 
     $('<td>Data</td>').appendTo(tr); 
    tr.appendTo(table); 
} 

//table.appendTo('body'); 
table.appendTo('#tbl'); 

Пожалуйста, помогите, я пытаюсь добавить таблицу в div, добавив jquery. но его не работает

Answer 1

Раскомментируйте прокомментированную строку, она решит ее. Вы не добавляете динамически созданный элемент к существующему объекту DOM. Если вы appened динамически созданный элемент для тела, вы сможете увидеть его на странице

Answer 2

Он работает переключая комментарии в последних двух строках:

var rows = 10; //here's your number of rows and columns 
var cols = 23; 
var table = $('<table id="tbl"><tbody>'); 
for (var r = 0; r < rows; r++) { 
    var tr = $('<tr class="datarow">'); 
    for (var c = 0; c < cols; c++) 
     $('<td>Data</td>').appendTo(tr); 
    tr.appendTo(table); 
} 

table.appendTo('body'); 

https://jsfiddle.net/b5snhour/

Answer 3

Упростить это следующим образом:

var rows = 10; //here's your number of rows and columns 
var cols = 23; 
var markup = '<table id="tbl"><tbody>'; // Open Table 
for (var r = 0; r < rows; r++) { 
    markup += '<tr class="datarow">'; // Add Each Row 
    for (var c = 0; c < cols; c++){ 
     markup += '<td>Data</td>'; //Add Multiple column in each row 
    } 
    markup += '</tr>' //close Each Row <tr> 
} 
markup += '</tbody></table>'; //Close body and table. 


$("body").append(markup); // Append it to body. 

Надеюсь, что это сработает.