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');

请帮助，我试图通过附加jquery将表添加到div。但它不起作用

Answer 1

取消注释注释行，它将解决它。您没有将动态创建的元素附加到现有DOM对象。如果您将动态创建的元素添加到正文，则可以在页面上查看它

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.

希望它能奏效。

Jquery appendTo不工作

3 个答案: