Dynamically update a table using javascript

Here is the demo fiddle. (simple version)
NEW: See the updated fiddle (advanced version).

Let's say you have this JSON data retrieved:

var jsonData = [
    { field1: 'value a1', field2: 'value a2', field3: 'value a3', field4: 'value a4' },
    { field1: 'value b1', field2: 'value b2', field3: 'value b3', field4: 'value b4' },
    { field1: 'value c1', field2: 'value c2', field3: 'value c3', field4: 'value c4' }
];

And you have this table:

<table id="data-table">
    <tr><td>There are no items...</td></tr>
</table>

Now, you need a method that can parse the values in a customisable order and presence. For example, if you can pass a field array to the parser function; you can set the order of the fields and leave out a field or two if you want to:

loadTable('data-table', ['field1', 'field2', 'field3'], jsonData);

Notice that field4 is not parsed.

The loadTable function loops through the items of the returned array and create a <tr> with each field value inside a <td>. Here is the simple function:

function loadTable(tableId, fields, data) {
    //$('#' + tableId).empty(); //not really necessary
    var rows = '';
    $.each(data, function(index, item) {
        var row = '<tr>';
        $.each(fields, function(index, field) {
            row += '<td>' + item[field+''] + '</td>';
        });
        rows += row + '<tr>';
    });
    $('#' + tableId).html(rows);
}

UPDATE:

Added support for:

• Table headers
• Default text (for empty list)
• Appending lists
• Clearing the table
• etc...

You can now simply include an empty table and the dynamicTable will take care of the rest:

<table id="data-table"></table>

Call the dynamicTable.config() method to configure the table:

var dt = dynamicTable.config('data-table', //id of the table
                             ['field2', 'field1', 'field3'], //field names
                             ['header 1', 'header 2', 'header 3'], //set to null for field names to be used as header names instead of custom headers
                             'There are no items to list...'); //default text for no items

Then call dt.load(data); to load new data (removes the previous list if there is one),
OR call dt.load(data, true); to append the new data at the end of the previous list.

Calling dt.clear(); method will clear the whole list.

Updated fiddle here.