Question

我想编写JavaScript代码以从数组中读取信息，并将其表示为HTML表，然后用特定的图像替换特定的元素。

我认为我需要遍历二维数组并使用swap-case，例如，如果当前元素为“”，则将其与特定图像交换。

二维数组是这样的。

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

很抱歉像这样放弃这个问题，但是我还是个新手，这真是毁了我。

Answer 1

您可以创建一个由代码作为键的对象，并将相应的图像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>

HTML表成大片

1 个答案: