Create a dynamic table using jQuery

There are a few ways to accomplish the actual creation of the table without plugins. For example:

$('body').append('<table id="myTable"></table>');

You can then use .append to append table headers and rows by calling the table's id. Using .html will allow you to populate the table.

DataTables is a feature-rich jQuery Table plugin. Without knowing the functionality required by your application, it's hard to make perfect recommendations, though.

There is nice short introcution to what you are looking for in here: Creating Dynamic Tables with jQuery

Writing in a closure to avoid global variables. You can move the code out of the closure (first and last lines) when you put it into your app.

Assigning the table to a variable helps since you've got a resource to manipulate later, instead of requerying which can be taxing. myTable is a jQuery object, hence the example html() call, that'll add <thead> and <tbody> tags to your table element.

Also note that when you manipulate any element's inner contents, it's always best to wrap all your content inside as few elements as possible, since it will increase manipulation speed.

(function() {
   var myTable = $('<table></table>');
   $('body').append(myTable);
   myTable.html('<thead></thead><tbody></tbody>');
})();

You can use jTemplates or DOM creation plugin to write easy to read code.