How to display images in a table dynamically?

Question

I am making a table whose data is dynamically changed with the following script. I also want to display the respective images of the groups beside the group names. When the group names will change, the image will also change.

The table works absolutely fine.

The image files are there in my ide, so the path mentioned is correct. However the images are not displayed.

<script>
    //$, jQuery

    var lookupTable = {
    Palm: "PM",
    Cedar: "CED",
    Oak: "OA",
    Chinar: "CHI"
};

var setGroup = function(groupName) {
    var t  = jQuery('<div></div>').addClass('group');
    var tn = jQuery('<div></div>').addClass('group-name').appendTo(t);
    jQuery('<img>').attr('src','/examples/media/images/'+ groupName.toLowerCase() + '.png').appendTo(tn);
    jQuery('<span></span>').text(groupName).appendTo(tn);

    return t;
};

    $.getJSON('https://service_program', function(data){

        var taf = $('#item1').empty();      
        var tar = $('#item2').empty();
        var tat = $('#item3').empty();
        var tao = $('#item4').empty();


        jQuery.each(data, function(idx, game){

            if (game['Category'] === 1){
                var tr = $('<tr></tr>').appendTo(taf); 
            } else if (game['Category'] === 2) {
                var tr = $('<tr></tr>').appendTo(tar); 
            } else if (game['Category'] === 3){
                var tr = $('<tr></tr>').appendTo(tat);
            } else if (game['Category'] === 4){
                var tr = $('<tr></tr>').appendTo(tao);
            }

            $('<td></td>').text(game['group 1']).appendTo(tr);
            $('<td></td>').text(game['group 2']).appendTo(tr);
            $('<td></td>').text(game['itemName 1']).appendTo(tr);
            $('<td></td>').text(game['itemName2']).appendTo(tr);

        });         
    });

</script>

Where am I going wrong?

Answer 1

用这个：

$('<td></td>').$('<img>').attr('src','/examples/media/image/'+ groupName.toLowerCase() + '.png').appendTo(tr);