Dynamic table generation in jQuery

Question

How can I dynamically generate an HTML <table> with a variable number of rows?

The number of rows will depend on the number of properties that exist within a Javascript object.

function showTable(trnum) //number of table rows passed in
{
   // how?
   // $("#elem").foo // #elem - element container for table
}

Answer 1

function showTable(trnum) {
    var tableCode = "<table>";
    for (var i=0; i<trnum; i++) {
        tableCode += "<tr>" + "stuff inside each tr ?" + "</tr>";
    }
    tableCode += "</table>";
    $("#elem").append(tableCode);
}

Answer 2

Follow the link. Generating HTML Tables with jQuery. For demo go here

Answer 3

You could give this a try:

$.createTable = function(trnum)
{
    var reps = new Array(trnum);
    var table = $('<table></table>');
    $.each(reps,function(){ 
        var td    = $('<tr><td> Stuff here </td></tr>');
        table.append(td)     
    }); 
    $('#elem').append(table);
}

Calling function:

$.createTable(6);