Search code examples
javascriptarraysswap

HTML table into imges

I want to write JavaScript code to read the information from an array, and to represent it as an HTML table, and then to replace specific elements with specific images.

I think I need to loop through the two-dimensional array and use swap-case, and, for example, if the current element is " ", then to swap it with a specific image.

The two-dimensional array is like this.

HTML:

<table id="table" border="10">         
    <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>

JavaScript: 

var array = [["h", " ", "tl", " ", "sl", " "],
                 ["b", "tl", " ", " ", "sl", " "],
                 ["t", " ", " ", " ", "sl", " "],
                 [" ", "sl", " ", " ", " ", "s"],
                 [" ", "sl", " ", " ", "tl", "b"],
                 [" ", "sl", " ", "tl", " ", "t"]],
    table = document.getElementById("table");

for(var i = 0; i < table.rows.length; i++) {
  for(var j = 0; j < table.rows[i].cells.length; j++) {
      table.rows[i].cells[j].innerHTML = array[i][j];
  }
}

the switching is like this:

" " = https://cdn.discordapp.com/attachments/394449403911471105/574967925254127659/empty.png

"h" = https://cdn.discordapp.com/attachments/394449403911471105/574968068187488256/head.jpg

"b" = https://cdn.discordapp.com/attachments/394449403911471105/574968145719197707/body.jpg

"t" = https://cdn.discordapp.com/attachments/394449403911471105/574968236060180481/tail.jpg

"sl" = https://cdn.discordapp.com/attachments/394449403911471105/574968327948992522/standing_ladder.jpg

"tl" = https://cdn.discordapp.com/attachments/394449403911471105/574968405011202078/tilted_ladder.jpg

Sorry to dump the question like this, but I'm still new and this is destroying me.

Solution

  • You could create an object keyed by the codes and with the corresponding image URLs as values:

    var array = [["h", " ", "tl", " ", "sl", " "],
                 ["b", "tl", " ", " ", "sl", " "],
                 ["t", " ", " ", " ", "sl", " "],
                 [" ", "sl", " ", " ", " ", "sl"],
                 [" ", "sl", " ", " ", "tl", "b"],
                 [" ", "sl", " ", "tl", " ", "t"]],
    table = document.getElementById("table"),
    map = {
        " ": "https://cdn.discordapp.com/attachments/394449403911471105/574967925254127659/empty.png",
        "h": "https://cdn.discordapp.com/attachments/394449403911471105/574968068187488256/head.jpg",
        "b": "https://cdn.discordapp.com/attachments/394449403911471105/574968145719197707/body.jpg",
        "t": "https://cdn.discordapp.com/attachments/394449403911471105/574968236060180481/tail.jpg",
        "sl": "https://cdn.discordapp.com/attachments/394449403911471105/574968327948992522/standing_ladder.jpg",
        "tl": "https://cdn.discordapp.com/attachments/394449403911471105/574968405011202078/tilted_ladder.jpg"
    };
for (var i = 0; i < table.rows.length; i++) {
    var row = table.rows[i];
    for (var j = 0; j < row.cells.length; j++) {
        var cell = row.cells[j];
        cell.innerHTML = ""; // remove what was there before
        var img = document.createElement("img");
        img.src = map[array[i][j]]; // retrieve & set the image location
        cell.appendChild(img);
    }
}
    <table id="table" border="10">         
    <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>