'td'-元素未使用循环附加到'tr'元素

Question

I am dynamically creating a table with 3 col based. I am using this code, But the td is not appending to tr .

Here is my code :

var l = 10;

for(i=0; i<l; i++){
    if(i%3==0){
       var tr = $('tbody').append('<tr/>')
    }
    $(tr).append('<td>'+i+'</td>'); //not appending to tr element!
}

Live Demo

Answer 1

Change to:

   var tr = $('<tr />').appendTo('tbody'); // this returns the tr element.

THE WORKING DEMO.

Answer 2

$('tbody').append('<tr/>') returns the <tbody> 's jQuery .

You should do this:

var body = $('tbody'),
    l = 10,
    tr,
    i;

for (i = 0; i < l; i += 1) {
    if (i % 3 === 0) {
       tr = $('<tr />').appendTo(body); 
    }

    tr.append('<td>' + i + '</td>');
}

Answer 3

Try:

var i, il, tr, td;
var tbody = $('tbody');

for (i = 0, il = 10; i < il; i++) {
    if (i % 3 === 0) {
       tr = $('<tr />').appendTo(tbody);
    }

    $('<td />').text(i).appendTo(tr);
}