[Answer]-Dynamically Create Table With Javascript and Jquery for each entry in a list

1👍

There are a number of issues with your code, try this instead:

function isPowered(string) {
    var onImg = '<img src="http://placekitten.com/g/200/300"/>';
    var offImg = '<img src="http://placehold.it/100x100"/>';
    return (string == 'poweredOn') ? onImg : offImg;
}

$(document).ready(function () {
    $('#table_name').append("<table class='sortable table' id='table-data' data-sortable><thead><tr><th align='center' data-toggle='tooltip' data-placement='left' title=''> <b>VM Name</b></th><th align='center' data-toggle='tooltip' data-placement='left' title=''><b>PowerState </b> </th><th align='center' data-toggle='tooltip' data-placement='left' title='N'><b>Commands </b></th></tr></thead><tbody>");

    for (var index = 0; index < json.vmlist.length; index++) {
            $('#table-data').append ('<tr><td>' + json.vmlist[index][0] + '</td><td>' + isPowered(json.vmlist[index][1]) + '</td><td>' + json.vmlist[index][2] + '</td></tr>');
    }

    Sortable.init();
});

Fiddle

ALSO: You will want to re-initialize any javascript AFTER the table is built for things like tooltips and sortable, etc.

Leave a comment