CODEWITHSUNDEEP
jquery
PRANAV
PRANAV

Reputation: 1111

Jquery appendTo not working

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

Please help, I am trying to add table to a div by append jquery. but its not working

Upvotes: 0

Views: 411

Answers (3)

mauretto
mauretto

Reputation: 3212

It works toggling comments in last two rows:

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/

Upvotes: 0

Touqeer Shafi
Touqeer Shafi

Reputation: 5264

Simplify it like this:

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.

Hope it will work.

Upvotes: 0

NightsWatch
NightsWatch

Reputation: 467

Uncomment the commented line, it will solve it. You are not attaching dynamically created element to existing DOM object. If you appened the dynamically created element to body you will be able to view it on the page

Upvotes: 1

Related Questions