JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

HTML

<table id="ajaxdata" class="table">
    <thead>
        <tr>
            <th data-bind="id">id</th>
            <th data-bind="lastname">lastname</th>
            <th data-bind="firstname">firstname</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<button>New Records</button>

CSS

table {
    width:100%;
}
table thead th {
    text-align:left;
}

JavaScript

ajaxResp = [{
    id: '1',
    lastname: 'Wessell',
    firstname: 'Sean'
}, {
    id: '2',
    lastname: 'Jones',
    firstname: 'Michael'
}, {
    id: '3',
    lastname: 'Jameson',
    firstname: 'Smith'
}];

$.each(ajaxResp, function () {
    var tbody = $('#ajaxdata tbody');
    var record = this;

    tbody.append('<tr>');
    $('#ajaxdata th').each(function () {
        var prop = $(this).data('bind');
        tbody.append('<td>' + record[prop] + '</td>');
    });
    tbody.append('</td>');
});

$('button').click(function () {

    ajaxResp = [{
        id: '4',
        lastname: 'Smith',
        firstname: 'Able'
    }, {
        id: '5',
        lastname: 'McKearny',
        firstname: 'Sam'
    }, {
        id: '6',
        lastname: 'Healy',
        firstname: 'Michelle'
    }];

    var tbody = $('#ajaxdata tbody');
    tbody.html('');

    $.each(ajaxResp, function () {

        var record = this;

        tbody.append('<tr>');
        $('#ajaxdata th').each(function () {
            var prop = $(this).data('bind');
            tbody.append('<td>' + record[prop] + '</td>');
        });
        tbody.append('</td>');
    });

});