将行和单元格追加到表

Question

I have following code:

   function createTable() {
        var $table = $('<table>').css({border:'1px dotted lightgrey'});
        var $row = $('<tr>').css({ height: '20px' });
        var $cell = $('<td>').css({width:'120px'});

        $row.append($cell).append($cell);
        $table.append($row).append($row);
        $('body').append($table);
    }

I want to create 2 cell and row inside table but the result is not what I expect, It creates only 1 for each row and cell.

Any advice will be helpful.

Answer 1

You need to clone the cell, else it will be same as relocating the cell when you use .append() second time

$row.append($cell).append($cell.clone());

Demo: Fiddle

Answer 2

In extension to Aruns answer,

You can create a method to clone things if you have to add rows or cells multiple times,

function CreateClone(obj, count) {
    count = count || 1;
    var clones = [];

    for (var i = 0; i < count; i++) {
        clones.push(obj.clone());
    }

   return clones;
}

And call it like this,

var rowClones = CreateClone($('<tr>').css({ height: '20px' }), 5);
var cellClones = CreateClone($('<td>').css({width:'120px'}), 5);