Question

Consider I have a table, like below, that I am trying to populate with many jpegs for each row, like say BillSmith.jpg and NancyClinton.jpg.

Example Table to be populated with pics:

NY | Smith, Bill (trying to put 'BillSmith.jpg' here)
NY | Clinton, Nancy (trying to put 'NancyClinton.jpg' here)

I am confused with what to put after this part <img src="javascript: in the 2nd to last line of the below code snippet.

$("#html_table tbody td:nth-child(2)").each(function(){
        var the_name = $(this).html();

        // Creates the string of file names ( BillSmith.jpg ) matching the file names of jpeg pics

        var nameList = the_name.split(",");
        var firstLast = nameList[1] + nameList[0];
        var source_foto = "staff_jpegs/"+firstLast+".jpg";

        $(this).html( the_name +'<br><div class="fotos" style="text-align:center"><img src="javascript:source_foto" height="80" width="80"/></div>');
        });

The above code doesnt work because I am assuming a function not a variable can only be after javascript: .

Looking the easy way to get many fotos into their corresponding table rows using more or less this structure.

Answer 1

$("#html_table tbody td:nth-child(2)").each(function(){
        var the_name = $(this).html();

        // Creates the string of file names ( BillSmith.jpg ) matching the file names of jpeg pics

        var nameList = the_name.split(", ");
        var firstLast = nameList[1] + nameList[0];
        var source_foto = "staff_jpegs/"+firstLast+".jpg";

        $(this).html( the_name +'<br><div class="fotos" style="text-align:center"><img src="'+source_foto+'" height="80" width="80"/></div>');
        });

You don’t need the javascript: you can just use the variable name. Also, your split should be on “, ” and not just “,”