Dynamic Table v.1

by onury

HTML

<table id="data-table">
    <thead>
        <tr>
            <td>header 1</td>
            <td>header 2</td>
            <td>header 3</td>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td colspan="3" style="text-align:center">There are no items to list...</td>
    </tr>
    </tbody>
</table>
<br />
<button id="btn-update">Update List</button>

CSS

html, body {
    padding: 5px;
}

#data-table {
    font-family: calibri, arial;
    width: 400px;
}

#data-table thead td {
    background-color: #8CCCF1;
}

#data-table td {
    border: 1px solid #466E85;
    width: 136px;
    padding: 7px;
}

JavaScript

$(document).ready(function(e) {
    
    var data1 = [
        { 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' }
        ];
    
    var data2 = [
        { field1: 'new value a1', field2: 'new value a2', field3: 'new value a3' },
        { field1: 'new value b1', field2: 'new value b2', field3: 'new value b3' },
        { field1: 'new value c1', field2: 'new value c2', field3: 'new value c3' }
        ];
    
    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 + ' tbody').html(rows);
    }
    
    loadTable('data-table', ['field2', 'field1', 'field3'], data1);
    
    $('#btn-update').click(function(e) {
        loadTable('data-table', ['field2', 'field1', 'field3'], data2);
    });
    
});