HTML таблица в imges - PullRequest
Новая
       12

HTML таблица в imges

0 голосов
/ 06 мая 2019

Я хочу написать код JavaScript, чтобы прочитать информацию из массива и представить ее в виде таблицы HTML, а затем заменить определенные элементы конкретными изображениями.

Я думаю, что мне нужно перебратьдвумерный массив и используйте регистр подстановки, и, например, если текущий элемент равен "", то поменяйте его местами с конкретным изображением.

Двумерный массив выглядит следующим образом.

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];
  }
}

переключение происходит следующим образом:

"" = 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

Извините, что бросил вопрос, как этот, но я все еще новичок, и это уничтожает меня.

1 Ответ

1 голос
/ 06 мая 2019

Вы можете создать объект с ключами по кодам и с соответствующими URL-адресами изображений в качестве значений: 

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>
...